Đồ án xây dựng website thương mại điện tử với chatbot tư vấn

6 Đổi mật khẩu Đổi mật khẩu 7 Tìm kiếm sản phẩm Tìm sản phẩm theo tên 9 Tra cứu đơn hàng Tra cứu đơn hàng đã mua 10 Đánh giá sản phẩm Đánh giá sản phẩm đã mua 11 Bán hàng Đăng bán sản ph

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ

VỚI CHATBOT TƯ VẤN

Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến

Sinh viên thực hiện 1 : Trần Đoàn Phương - 19520230 Sinh viên thực hiện 2 : Đỗ Đức Tâm - 19520253

TP HCM, tháng 12 năm 2022

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ

VỚI CHATBOT TƯ VẤN

Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến

Sinh viên thực hiện 1 : Trần Đoàn Phương - 19520230

Sinh viên thực hiện 2 : Đỗ Đức Tâm - 19520253

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI CHATBOT TƯ VẤN

Tên đề tài tiếng Anh:

BUILDING AN E-COMMERCE WEBSITE WITH CONSULTING CHATBOT

Cán bộ hướng dẫn: ThS Trần Thị Hồng Yến

Thời gian thực hiện: Từ ngày 5/9/2022 đến ngày 31/12/2022

Sinh viên thực hiện:

dễ dàng hơn trong việc mua bán Tuy nhiên, trong thời đại công nghệ phát triển nhưhiện nay, mua sắm online ngày càng phổ biến hơn, đặc biệt đối với giới trẻ

- Có thể thấy nhiều ưu điểm vượt trội của mua sắm online so với mua trực tiếp truyềnthống:

o Nhanh chóng: chỉ mất vài thao tác để tìm được mặt hàng mình cần

o Tiện lợi: không cần ra trực tiếp cửa hàng, có thể mua ở bất cứ đâu vào bất cứthời gian nào.

o Đa dạng mặt hàng: gần như có thể tìm thấy tất cả mặt hàng ở các trangthương mại điện tử

o Dễ dàng lựa chọn: có thể so sánh các sản phẩm dựa vào lượt đánh giá củanhững người mua trước, dễ dàng cân nhắc khi mua sản phẩm

o Giá tốt: vì sự cạnh tranh về giá trên các sàn thương mại điện tử rất cao nêncác sản phẩm thường có giá rẻ hơn hoặc bằng ngoài thị trường

- Hiện nay có rất nhiều website thương mại điện tử phổ biến tại Việt Nam nhưShopee, Tiki, Sendo, Lazada,

- Nhận thấy tiềm năng phát triển của ngành thương mại điện tử, nhóm em mongmuốn tự tạo nên một website thương mại điện tử của riêng mình, đó là lí do chúng

em chọn đề tài này

2 Mục tiêu:

- Xây dựng được một website thương mại điện tử đáp ứng các tiêu chí:

o Giao diện thân thiện, dễ sử dụng

o Đáp ứng các tính năng cơ bản cần có của một website thương mại điện tử

o Tích hợp chatbot tư vấn giúp dễ dàng hơn trong việc tra cứu thông tin

o Quản lý tài khoản, thông tin khách hàng theo đối tượng

o Quản lý giỏ hàng, thanh toán

o Quản lý, tra cứu thông tin đơn hàng

o Tích hợp chatbot tư vấn

o Tích hợp thanh toán online

o Quản lý mã giảm giá

4 Đối tượng:

- Người bán có nhu cầu bán sản phẩm

- Khách hàng có nhu cầu mua sản phẩm

5 Phương pháp thực hiện:

- Trải nghiệm các website thương mại điện tử hiện có, từ đó phân tích, xác định cáctính năng cần triển khai

- Nâng cấp, bổ sung tính năng từ sản phẩm Đồ án 1

- Lập kế hoạch, phân công công việc cho các thành viên

- Tìm hiểu công nghệ sẽ sử dụng

- Triển khai xây dựng website theo đúng kế hoạch đã đề ra

- Kiểm thử, phát hiện và sửa lỗi (nếu có)

- Báo cáo đồ án

6 Công nghệ:

- Sử dụng MERN Stack để triển khai ứng dụng: MongoDB, ExpressJS, ReactJS,NodeJS

7 Kết quả mong đợi

- Tạo được một website với giao diện hiện đại, thân thiện và dễ sử dụng

- Nâng cao trải nghiệm người dùng

- Bổ sung thêm một số tính năng hữu ích

- Nâng cấp chatbot để có thể hỗ trợ tra cứu thông tin tốt hơn

- Có tính tiến hoá: có thể phát triển, mở rộng thêm các tính năng mới trong tương lai

- Quá trình thực hiện đạt đúng tiến độ của môn học

Kế hoạch thực hiện:

Thời gian Công việc thực hiện Thành viên thực hiện

Back-end: thực hiện các chức năng quản lýsản phẩm, giỏ hàng, yêu thích.

Đỗ Đức Tâm: tìm hiểu chatbot và cách thựchiện phương thức thanh toán online, làmbáo cáo

Đỗ Đức Tâm: kiểm tra lỗi

Sau cùng là deploy và hoàn thiện sản phẩm

Cả 2 thành viên

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

Trần Đoàn Phương Đỗ Đức Tâm

MỤC LỤC

ĐỀ CƯƠNG CHI TIẾT 1

MỤC LỤC 6

DANH MỤC HÌNH ẢNH 9

DANH MỤC BẢNG BIỂU 11

Chương 1 GIỚI THIỆU ĐỀ TÀI 14

1.1 Tên đề tài 14

1.2 Lí do chọn đề tài 14

1.3 Mô tả sản phẩm 14

1.4 Chức năng chính 14

1.5 Công nghệ sử dụng 16

1.6 Thông tin nhóm 16

Chương 2 CƠ SỞ LÝ THUYẾT 17

2.1 HTML 17

2.2 CSS 18

2.3 JavaScript 18

2.4 Thư viện React.JS 20

2.5 Node.JS 22

2.6 Express.JS 23

2.7 MongoDB 24

Chương 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 25

3.1 Mô hình hệ thống 25

3.2 Sơ đồ Use-case 26

3.3 Danh sách các use-case 27

3.4 Đặc tả use-case 27

3.4.1 Use-case “Đăng nhập” 27

3.4.2 Use-case “Đăng ký” 28

3.4.3 Use-case “Đăng xuất” 29

3.4.4 Use-case “Quản lý thông tin cá nhân” 30

3.4.5 Use-case “Mua hàng” 32

3.4.6 Use-case “Tra cứu đơn hàng” 33

3.4.7 Use-case “Bán hàng” 34

3.4.8 Use-case “Tra cứu đơn bán” 35

3.4.9 Use-case “Quản lý thông tin sản phẩm” 36

3.4.10 Use-case “Quản lý mã giảm giá” 37

Chương 4 THIẾT KẾ DỮ LIỆU 39

4.1 Sơ đồ logic 39

4.1.1 Bảng “Account” 40

4.1.2 Bảng “Address” 40

4.1.3 Bảng “Product” 40

4.1.4 Bảng “Color” 41

4.1.5 Bảng “ProductInCart” 41

4.1.6 Bảng “ProductInFavorite” 42

4.1.7 Bảng “ProductInBill” 42

4.1.8 Bảng “Bill” 42

4.1.9 Bảng “Evalute” 43

4.1.10 Bảng “DiscountCode” 43

Chương 5 THIẾT KẾ GIAO DIỆN 44

5.1 Danh sách màn hình 44

5.2 Chi tiết màn hình 46

5.2.1 Màn hình “Đăng nhập” 46

5.2.2 Màn hình “Đăng ký” 47

5.2.3 Màn hình “Trang chủ” 48

5.2.4 Màn hình “Danh sách sản phẩm” 50

5.2.5 Màn hình “Chi tiết sản phẩm” 52

5.2.6 Màn hình “Giỏ hàng” 53

5.2.7 Màn hình “Yêu thích” 55

5.2.8 Màn hình “Yêu cầu đăng nhập” 56

5.2.9 Màn hình “Hồ sơ” 57

5.2.10 Màn hình “Cửa hàng” 58

5.2.11 Màn hình “Đơn mua” 59

5.2.12 Màn hình “Đơn bán” 60

5.2.14 Màn hình “Thêm sản phẩm” 62

5.2.15 Màn hình “Mã giảm giá” 64

5.2.16 Màn hình “Chi tiết đơn mua” 65

5.2.17 Màn hình “Chi tiết đơn bán” 66

5.2.18 Màn hình “Sửa sản phẩm” 67

5.2.19 Màn hình “Thêm mã giảm giá” 68

5.2.20 Màn hình “Cập nhật mã giảm giá” 68

Chương 6 CHAT BOT TƯ VẤN 70

6.1 Giới thiệu về chat bot FPT.AI 70

6.1.1 Phạm vi và mục đích 70

6.1.2 Tổng quan về quy trình 71

6.2 Danh sách chức năng sử dụng 71

6.3 Chi tiết chức năng 72

6.3.1 Kịch bản có sẵn 72

6.3.2 Kịch bản theo tin nhắn người dùng 74

6.3.3 Hỗ trợ máy học 76

6.3.4 Tư vấn trực tiếp 81

6.3.5 Thống kê 82

6.3.6 Lịch sử 83

6.3.7 Liên kết 84

Chương 7 KẾT LUẬN 85

7.1 Ưu điểm 85

7.2 Hạn chế 85

7.3 Hướng phát triển 85

TÀI LIỆU THAM KHẢO 86

DANH MỤC HÌNH ẢNH

Hình 2.1 Cấu trúc file html căn bản 17

Hình 2.2 Cấu trúc CSS cơ bản 18

Hình 2.3 Phương thức hoạt động của JavaScript 19

Hình 2.4 Một đoạn code trong trong ứng dụng sử dụng React 20

Hình 2.5 Một vài file components trong ứng dụng 21

Hình 2.6 Một đoạn code gọi router từ các tệp định tuyến được định nghĩa 23

Hình 2.7 Một đoạn code sử dụng phương thức định tuyến 24

Hình 2.8 Một đoạn code đối tượng tài khoản trong cơ sở dữ liệu 24

Hình 2.9 Một đoạn code gọi hàm xử lý cơ sở dữ liệu 24

Hình 3.1 Mô hình hệ thống 25

Hình 3.2 Sơ đồ use-case tổng quát 26

Hình 4.1 Sơ đồ logic dữ liệu 39

Hình 5.1 Hình ảnh màn hình “Đăng nhập” 46

Hình 5.2 Hình ảnh màn hình “Đăng ký” 47

Hình 5.3 Hình ảnh màn hình “Trang chủ” 48

Hình 5.4 Hình ảnh màn hình “Danh sách sản phẩm” 50

Hình 5.5 Hình ảnh màn hình “Chi tiết sản phẩm” 52

Hình 5.6 Hình ảnh màn hình “Giỏ hàng” 53

Hình 5.7 Hình ảnh màn hình “Yêu thích” 55

Hình 5.8 Hình ảnh màn hình “Yêu cầu đăng nhập” 56

Hình 5.9 Hình ảnh màn hình “Hồ sơ” 57

Hình 5.10 Hình ảnh màn hình “Cửa hàng” 58

Hình 5.11 Hình ảnh màn hình “Đơn mua” 59

Hình 5.12 Hình ảnh màn hình “Đơn bán” 60

Hình 5.13 Hình ảnh màn hình “Tài khoản” 61

Hình 5.14 Hình ảnh màn hình “Thêm sản phẩm” 62

Hình 5.15 Hình ảnh màn hình “Mã giảm giá” 64

Hình 5.16 Hình ảnh màn hình “Chi tiết đơn mua” 65

Hình 5.18 Hình ảnh màn hình “Sửa sản phẩm” 67

Hình 5.19 Hình ảnh màn hình “Thêm mã giảm giá” 68

Hình 5.20 Hình ảnh màn hình “Cập nhật mã giảm giá” 69

Hình 6.1 Hình ảnh bắt đầu sử dụng bot 72

Hình 6.2 Hình ảnh tin nhắn của bot có sẵn nút tính năng 73

Hình 6.3 Hình ảnh màn hình thiết kế kịch bản 73

Hình 6.4 Hình ảnh màn hình sơ đồ kịch bản 74

Hình 6.5 Hình ảnh bot trả lời theo tin nhắn cần hỗ trợ 74

Hình 6.6 Hình ảnh bot trả lời tin nhắn người dùng 1 75

Hình 6.7 Hình ảnh bot trả lời tin nhắn người dùng 2 75

Hình 6.8 Hình ảnh bot trả lời tin nhắn người dùng 3 76

Hình 6.9 Hình ảnh tính năng máy học “Câu mẫu” 77

Hình 6.10 Hình ảnh tính năng máy học “Ý định” 78

Hình 6.11 Hình ảnh tính năng máy học “Loại thực thể” 79

Hình 6.12 Hình ảnh tính năng máy học “Từ khóa” 80

Hình 6.13 Hình ảnh tính năng máy học “Từ điển” 81

Hình 6.14 Màn hình nhân viên hỗ trợ 81

Hình 6.15 Hình ảnh màn hình thống kê 82

Hình 6.16 Hình ảnh màn hình lịch sử 83

Hình 6.17 Hình ảnh chat bot tương tác với người dùng trên trang web 84

Hình 6.18 Hình ảnh chat bot tương tác với người dùng trên trang facebook 84

DANH MỤC BẢNG BIỂU

Bảng 1.1 Thông tin thành viên nhóm 16

Bảng 3.1 Danh sách các use-case chính 27

Bảng 3.2 Đặc tả use-case Đăng nhập 28

Bảng 3.3 Đặc tả use-case Đăng ký 29

Bảng 3.4 Đặc tả use-case Đăng xuất 29

Bảng 3.5 Đặc tả use-case Quản lý thông tin cá nhân 30

Bảng 3.6 Đặc tả use-case Chỉnh sửa thông tin cá nhân 31

Bảng 3.7 Đặc tả use-case Đổi mật khẩu 32

Bảng 3.8 Đặc tả use-case Tìm kiếm sản phẩm 32

Bảng 3.9 Đặc tả use-case Mua hàng 33

Bảng 3.10 Đặc tả use-case Tra cứu đơn hàng 34

Bảng 3.11 Đặc tả use-case Đánh giá sản phẩm 34

Bảng 3.12 Đặc tả use-case “Bán hàng” 35

Bảng 3.13: Đặc tả use-case Tra cứu đơn bán 36

Bảng 3.14 Đặc tả use-case “Quản lý thông tin sản phẩm” 37

Bảng 3.15 Đặc tả use-case “Quản lý mã giảm giá” 38

Bảng 4.1 Mô tả các bảng dữ liệu 40

Bảng 4.2 Chi tiết bảng Account 40

Bảng 4.3 Chi tiết bảng Address 40

Bảng 4.4 Chi tiết bảng Product 41

Bảng 4.5 Chi tiết bảng Color 41

Bảng 4.6 Chi tiết bảng ProductInCart 42

Bảng 4.7 Chi tiết bảng ProductInFavorite 42

Bảng 4.8 Chi tiết bảng ProductInBill 42

Bảng 4.9 Chi tiết bảng Bill 43

Bảng 4.10 Chi tiết bảng Evaluate 43

Bảng 4.11 Chi tiết bảng DiscountCode 43

Bảng 5.1 Danh sách màn hình 45

LỜI CẢM ƠN

Đồ án “Xây dựng website thương mại điện tử với chatbot tư vấn” là đồ án thứ

hai nhóm em triển khai trên môi trường web, phát triển lên từ sản phẩm Đồ án 1.Chúng em đã cố gắng tìm tòi, học hỏi, trau dồi kiến thức không ngừng cả trước vàtrong quá trình làm Đó là một chặng đường dài, và chúng em đã học hỏi được rấtnhiều điều Chúng em xin gửi lời cảm ơn chân thành đến:

 Các quý thầy cô trường Đại học Công nghệ Thông tin nói chung, và cô TrầnThị Hồng Yến nói riêng, đã tận tình giúp đỡ, truyền đạt những kiến thức bổ íchcho chúng em, đồng thời luôn lắng nghe ý kiến và góp ý cho chúng em ngàymột phát triển hơn

 Các thành viên trong nhóm đã không ngừng cố gắng, giúp đỡ lẫn nhau tronglúc khó khăn, cởi mở trao đổi trong suốt quá trình thực hiện đồ án

 Cuối cùng, xin cảm ơn gia đình, anh chị em, bạn bè là hậu phương vững chắccho chúng em yên tâm tập trung hoàn thành đồ án

Thành phố Hồ Chí Minh, ngày 21 tháng 12 năm2022

Nhóm sinh viên thực hiện

Trần Đoàn Phương – Đỗ Đức Tâm

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Tp.HCM, ngày … tháng năm 20

GVHD

ThS Trần Thị Hồng Yến

Chương 1 GIỚI THIỆU ĐỀ TÀI

1.1 Tên đề tài

- Xây dựng website thương mại điện tử với chatbot tư vấn

- Building an E-Commerce website with consulting chatbot

1.2 Lí do chọn đề tài

Với sự phát triển nhanh chóng của ngành thương mại điện tử, mua sắmonline dần trở nên quen thuộc với tất cả mọi người, ở mọi lứa tuổi Các sànthương mại điện tử lớn hiện nay như Shopee, Lazada, Tiki đều có phát triểnứng dụng trên mobile để dễ dàng truy cập trên điện thoại Tuy nhiên, mobileapp không thể thay thế hoàn toàn được website, bởi tính thuận tiện của nó.Website có thể truy cập ở bất cứ đâu một cách dễ dàng mà không cần cài đặt gì

cả, chỉ cần một trình duyệt và có kết nối internet

Mong muốn của chúng em là tự tạo nên một website thương mại điện tửdành riêng cho mình, có tích hợp chatbot tư vấn để dễ dàng tra cứu thông tin

Đó là lí do nhóm em chọn đề tài này

1.3 Mô tả sản phẩm

- Ứng dụng hỗ trợ người dùng mua hàng, bán hàng trực tuyến

- Triển khai trên môi trường web

1.4 Chức năng chính

- Quản lý tài khoản: Đăng nhập, đăng ký, đổi mật khẩu

- Quản lý sản phẩm theo danh mục

- Rao bán sản phẩm

- Quản lý thông tin sản phẩm

- Mua sản phẩm

- Đánh dấu yêu thích để mua sau

- Quản lý đơn hàng đã mua, đã bán

- Hệ thống đánh giá sản phẩm

- Quản lý thông tin cá nhân

- Quản lý mã giảm giá

- Hỗ trợ thanh toán online.

- Chat Bot tư vấn

1.5 Công nghệ sử dụng

- Figma: lên bản thiết kế giao diện

- HTML, CSS, JavaScript với thư viện React.JS: cài đặt front-end

- Node.js với framework Express.JS: cài đặt back-end

- MongoDB: cơ sở dữ liệu

- Github: quản lý mã nguồn

1.6 Thông tin nhóm

1 Trần Đoàn Phương 19520230 19520230@gm.uit.edu.vn

2 Đỗ Đức Tâm 19520253 19520253@gm.uit.edu.vn

Bảng 1.1 Thông tin thành viên nhóm

Chương 2 CƠ SỞ LÝ THUYẾT

- Các phiên bản tiếp theo của HTML lần lượt được phát hành: HTML2,HTML3, HTML4, và mới nhất là HTML5 Qua mỗi phiển bản, nó dầnđược cải tiến và bổ sung những tính năng cần thiết để hỗ trợ tốt hơn trongviệc xây dựng một trang web tĩnh

Hình 2.1 Cấu trúc file html căn bản

2.2 CSS

- CSS là viết tắt của cụm từ Cascading Style Sheets

- CSS được sử dụng để định dạng style cho các phần tử được tạo ra bởiHTML Hiểu đơn giản thì HTML tạo nên bộ khung và CSS trang trí để tạonên một trang web đẹp mắt

- CSS lần đầu tiên được đề xuất bởi Håkon Wium Lie vào ngày 10 tháng 10năm 1994 Vào thời điểm đó, Lie đang làm việc với Tim Berners-Lee (cha

đẻ của HTML) tại CERN Một số ngôn ngữ định kiểu khác cho web đãđược đề xuất cùng lúc và các cuộc thảo luận về danh sách gửi thư cộngđồng cũng như đồng thuận trong World Wide Web Consortium dẫn đếnCSS W3C đầu tiên (CSS1) được phát hành vào năm 1996 Đặc biệt, một đềnghị của Bert Bos có ảnh hưởng hơn đó là ông trở thành đồng tác giả củaCSS1 và được coi là đồng sáng tạo CSS

- Qua các năm, CSS được phát triển lên các phiên bản CSS2, CSS2.1, CSS3

và mới nhất là CSS4, với việc chia thành các mô đun riêng biệt, được dựatrên các mô đun từ CSS3

- Dưới đây là một đoạn mã CSS đơn giản để thiết lập màu chữ và kích thướcchữ cho thẻ <body>

Hình 2.2 Cấu trúc CSS cơ bản

2.3 JavaScript

- JavaScript là một ngôn ngữ lập trình thông dịch được sử dụng ở phía máykhách và phía máy chủ, cho phép tạo các trang web có các hình độngchuyên nghiệp JavaScript được hỗ trợ bởi hầu hết các trình duyệt web:Chrome, Firefox, Safari, Internet Explorer, Edge, Opera, Hầu hết các trìnhduyệt di động cho điện thoại thông minh đều hỗ trợ JavaScript

- JavaScript chủ yếu được sử dụng cho các website nhằm cung cấp cho ngườidùng trải nghiệm thân thiện hơn, bao gồm các chức năng: tự động cập nhậtcác trang web, cải tiến giao diện người dùng như menu và hộp thoại,animations, đồ họa 2D và 3D, bản đồ tương tác, trình phát video Chế độ

sử dụng JavaScript này trong trình duyệt web cũng được gọi là javascriptphía máy khách

- Phiên bản đầu tiên của ngôn ngữ này được đặt tên là Mocha vào tháng 5năm 1995, đổi tên thành LiveScript vào tháng 9 năm 1995, và được đổi tênthành JavaScript vào tháng 12 năm 1995 Năm 1996, JavaScript đã đượcgửi đến ECMA International để hoàn thiện trở thành, một đặc tính kỹ thuậttiêu chuẩn Vào tháng 6 năm 1997, đặc tính kỹ thuật chính thức đầu tiên chongôn ngữ được phát hành là ECMA-262 Phiên bản mới nhất của ngôn ngữ

là ECMAScript 2017 được phát hành vào tháng 6 năm 2017

- Cách hoạt động của JavaScript:

Hình 2.3 Phương thức hoạt động của JavaScript

- Khi web browser tải một web page, HTML parser bắt đầu phân tích cú phápHTML code và tạo DOM Bất cứ khi nào trình phân tích cú pháp gặp mộtchỉ thị CSS hoặc JavaScript (inline hoặc externally loaded), nó sẽ đượcchuyển giao cho CSS parser hoặc JavaScript engine theo yêu cầu

- JavaScript engine tải các tệp JavaScript bên ngoài và inline code, nhưngkhông chạy mã ngay lập tức, mà đợi HTML và CSS phân tích hoàn tất Khiđiều này được thực hiện, JavaScript được thực thi theo thứ tự chúng đượctìm thấy trên trang web: các biến và hàm được xác định, các lời gọi hàmđược thực thi, trình xử lý sự kiện được kích hoạt, Các hoạt động này dẫnđến việc DOM được cập nhật bởi JavaScript và được hiển thị ngay lập tứcbởi trình duyệt

- Trong đồ án, nhóm em đã sử dụng thư viện của JavaScript là React để thựchiện giao diện trang web

2.4 Thư viện React.JS

- React là thư viện JavaScript phổ biến nhất để xây dựng giao diện ngườidùng (UI) Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sửdụng phương pháp mới để render trang web

- Components của công cụ này được phát triển bởi Facebook Nó được ra mắtnhư một công cụ JavaScript mã nguồn mở vào năm 2013 Hiện tại, nó đã đitrước các đối thủ chính như Angular và Bootstrap, hai thư viện JavaScriptbán chạy nhất thời bấy giờ

- Cách React hoạt động: Code HTML bằng Javascript

Hình 2.4 Một đoạn code trong trong ứng dụng sử dụng React

- Ưu điểm của React:

o Dễ sử dụng:

 React là một thư viện GUI nguồn mở JavaScript tập trung vàomột điều cụ thể; hoàn thành nhiệm vụ UI hiệu quả Nó đượcphân loại thành kiểu “V” trong mô hình MVC (Model-View-Controller)

 Là lập trình viên JavaScript, bạn sẽ dễ dàng hiểu được nhữngđiều cơ bản về React Bạn thậm chí có thể bắt đầu phát triểncác ứng dụng dựa trên web bằng cách sử dụng react chỉ trongvài ngày

o Tái sử dụng code:

 Các thành phần trong dự án được đóng gói theo từng phầnriêng, dễ dàng trong việc quản lý cũng như tái sử dụng code

Hình 2.5 Một vài file components trong ứng dụng

o Hiệu suất tốt hơn với Virtual DOM:

 React sẽ cập nhật hiệu quả quá trình DOM (Document ObjectModel – Mô hình đối tượng tài liệu) Như bạn có thể biết, quátrình này có thể gây ra nhiều thất vọng trong các dự án ứngdụng dựa trên web May mắn là React sử dụng virtual DOMs,

vì vậy bạn có thể tránh được vấn đề này

 Công cụ cho phép bạn xây dựng các virtual DOMs và hostchúng trong bộ nhớ Nhờ vậy, mỗi khi có sự thay đổi trongDOM thực tế, thì virtual sẽ thay đổi ngay lập tức

 Hệ thống này sẽ ngăn DOM thực tế để buộc các bản cập nhậtđược liên tục Do đó, tốc độ của ứng dụng sẽ không bị giánđoạn

 React cho phép tạo giao diện người dùng có thể được truy cậptrên các công cụ tìm kiếm khác nhau Tính năng này là mộtlợi thế rất lớn vì không phải tất cả các khung JavaScript đềuthân thiện với SEO

 Ngoài ra, vì React có thể tăng tốc quá trình của ứng dụng nên

có thể cải thiện kết quả SEO Cuối cùng tốc độ web đóng mộtvai trò quan trọng trong tối ưu hóa SEO

2.5 Node.JS

- NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mãnguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệtcủa client Nền tảng này được phát triển bởi Ryan Dahl vào năm 2009, đượcxem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờvào mô hình hướng sự kiện (event-driven) không đồng bộ

- NodeJS là một nền tảng (platform) chứ không phải một web framework nhưmột số người thường nhầm lẫn

- Node.JS cũng không phải là một ngôn ngữ lập trình mà là một môi trườngruntime dùng để chạy JavaScript bên ngoài trình duyệt Vì vậy để học và sửdụng NodeJS thì người dùng cần có những kiến thức nhất định về một sốgiao thức, JavaScript hay kỹ thuật lập trình,…

- Và cuối cùng, một câu hỏi phổ biến của người dùng là: Node.JS là backendhay frontend? Thật ra Node.JS có thể được sử dụng như một frontend lẫnbackend nhờ vào các framework như Express.js hay Meteor.js Trong đồ ánnày, nhóm em sử dụng Node.JS để sử dụng làm backend với framework làExpress

- Ưu điểm:

o IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồngthời.

o Sử dụng JavaScript – một ngôn ngữ lập trình dễ học

o Chia sẻ cùng code ở cả phía client và server

o NPM(Node Package Manager) và module Node đang ngày càng pháttriển mạnh mẽ

o Khó thao tác với cơ sử dữ liệu quan hệ

o Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác

- Vì Express js chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựngcác ứng dụng web và API trở nên đơn giản hơn với các lập trình viên và nhàphát triển.Expressjs cũng là một khuôn khổ của Node.js do đó hầu hết các

mã code đã được viết sẵn cho các lập trình viên có thể làm việc

- Trên thực tế, nếu không sử dụng Express.js, bạn sẽ phải thực hiện rất nhiềubước lập trình phức tạp để xây dựng nên một API hiệu quả Express.JS đãgiúp cho việc lập trình trong Node.js trở nên dễ dàng hơn và có nhiều tínhnăng mới bổ sung

- ROUTER là chức năng được sử dụng chính trong đồ án của nhóm em Việcđịnh tuyến bằng Router giúp việc phân chia API theo đối tượng rất dễ dàng.

Hình 2.6 Một đoạn code gọi router từ các tệp định tuyến được định nghĩa

Hình 2.7 Một đoạn code sử dụng phương thức định tuyến

2.7 MongoDB

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

Hình 2.8 Một đoạn code đối tượng tài khoản trong cơ sở dữ liệu

- Các hàm truy vấn dữ liệu được định nghĩa sẵn trong thư viện mongoose,việc truy cập cũng như xử lý được thực hiện rất dễ dàng

Hình 2.9 Một đoạn code gọi hàm xử lý cơ sở dữ liệu

Chương 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

3.1 Mô hình hệ thống

Hình 3.10 Mô hình hệ thống

Trang web của nhóm em được xây dựng dựa trên mô hình MERN (MongoDB –Express – ReactJS - NodeJS) :

- ReactJS: Cài đặt Front-End.

- MongoDB: Cơ sở dữ liệu.

- NodeJS và ExpressJs: Cài đặt Back-End.

3.2 Sơ đồ Use-case

Hình 3.11 Sơ đồ use-case tổng quát

3.3 Danh sách các use-case

1 Đăng nhập Đăng nhập vào hệ thống

2 Đăng ký Đăng ký tài khoản mới

3 Đăng xuất Đăng xuất khỏi hệ thống

4 Quản lý thông tin cá nhân Xem / chỉnh sửa thông tin cá nhân

5 Chỉnh sửa thông tin cá nhân Sửa các thông tin như họ tên, email, số

điện thoại, giới tính,

6 Đổi mật khẩu Đổi mật khẩu

7 Tìm kiếm sản phẩm Tìm sản phẩm theo tên

9 Tra cứu đơn hàng Tra cứu đơn hàng đã mua

10 Đánh giá sản phẩm Đánh giá sản phẩm đã mua

11 Bán hàng Đăng bán sản phẩm mới

12 Tra cứu đơn bán Tra cứu đơn hàng đã bán

13 Quản lý thông tin sản phẩm Sửa thông tin, xoá sản phẩm

14 Quản lý mã giảm giá Thêm xóa sửa mã giảm giá

Bảng 3.2 Danh sách các use-case chính

3.4 Đặc tả use-case

3.4.1 Use-case “Đăng nhập”

Tên chức năng Đăng nhập

Tóm tắt Chức năng đăng nhập vào hệ thống

Dòng sự kiện chính 1 Hệ thống hiển thị form đăng nhập

2 Người dùng nhập tài khoản và mật khẩu (cả 2trường này đều bắt buộc nhập) và nhấn “Đăng

3 Hệ thống kiểm tra thông tin đăng nhập

Dòng sự kiện khác

Thông tin đăng nhập sai:

Nếu tài khoản không tồn tại: Hệ thống hiển thịthông báo tài khoản không tồn tại

Nếu tài khoản tồn tại nhưng sai mật khẩu: Hệthống hiển thị thông báo sai tài khoản

Trạng thái hệ thống trước

khi thực thiện use-case Điều kiện: không có

Trạng thái hệ thống sau

khi thực hiện use-case

Người dùng đăng nhập thành công vào hệ thống,được điều hướng đến trang chủ, có thể sử dụngcác quyền mà hệ thống cho phép

Điểm mở rộng Không có

Bảng 3.3 Đặc tả use-case Đăng nhập

3.4.2 Use-case “Đăng ký”

Tên chức năng Đăng ký

Tóm tắt Chức năng đăng ký tài khoản

Dòng sự kiện chính

1 Hệ thống hiển thị form đăng ký

2 Người dùng nhập các thông tin tài khoản, họ vàtên, địa chỉ E-mail, số điện thoại, tên đăng nhập, mậtkhẩu, xác nhận mật khẩu (các trường này đều bắtbuộc nhập) và nhấn “Đăng ký”

3 Hệ thống thực hiện kiểm tra thông tinDòng sự kiện khác Nếu tên tài khoản đã tồn tại, hệ thống hiển thị thông

báo tên tài khoản đã tồn tạiTrạng thái hệ thống trước

khi thực thiện use-case Điều kiện: không có

Trạng thái hệ thống sau

khi thực hiện use-case

Người dùng đăng ký thành công và được tự độngđăng nhập vào hệ thống, điều hướng đến trang chủ,

có thể sử dụng các quyền mà hệ thống cho phépĐiểm mở rộng Không có

Bảng 3.4 Đặc tả use-case Đăng ký

3.4.3 Use-case “Đăng xuất”

Tên chức năng Đăng xuất

Tóm tắt Chức năng đăng xuất tài khoản

khi thực hiện use-case

Người dùng đăng xuất khỏi hệ thống và được điềuhướng đến trang đăng nhập

Điểm mở rộng Không có

Bảng 3.5 Đặc tả use-case Đăng xuất

3.4.4 Use-case “Quản lý thông tin cá nhân”

Tên chức năng Quản lý thông tin cá nhân

Tóm tắt Chức năng quản lý thông tin cá nhân

3 Tại đây có ba thao tác có thể thực hiện (tách thành

ba use case): sửa thông tin cá nhân, đổi mật khẩu vàđăng xuất

Dòng sự kiện khác Không có

Trạng thái hệ thống trước

khi thực thiện use-case Điều kiện: đã đăng nhập tài khoản

Trạng thái hệ thống sau

khi thực hiện use-case

Người dùng có thể xem thông tin cá nhân của mình

và thực hiện các thao tác chỉnh sửaĐiểm mở rộng Không có

Bảng 3.6 Đặc tả use-case Quản lý thông tin cá nhân

Tên chức năng Chỉnh sửa thông tin cá nhân

Tóm tắt Chức năng chỉnh sửa thông tin cá nhân

Dòng sự kiện chính

1 Tại trang hồ sơ thông tin cá nhân, người dùngchỉnh sửa thông tin muốn

3 Người dùng bấm nút “Lưu thông tin”

4 Hệ thống cập nhật thông tin mới của người dùng

và thông báo lưu thông tin thành côngDòng sự kiện khác Không có

Bảng 3.7 Đặc tả use-case Chỉnh sửa thông tin cá nhân

Tên chức năng Đổi mật khẩu

Tóm tắt Chức năng đổi mật khẩu

Tên chức năng Tìm kiếm sản phẩm

Tóm tắt Tìm kiếm sản phẩm theo tên

Dòng sự kiện chính

1 Người dùng chọn danh mục sản phẩm(có thểkhông), nhập tên sản phẩm trên thanh tìm kiếm vànhấn vào biểu tượng tìm kiếm

2 Hệ thống tìm kiếm và hiển thị những sản phẩm cótên giống với từ khoá

khi thực hiện use-case

Người dùng được điều hướng đến trang hiển thịdanh sách sản phẩm phù hợp

Dòng sự kiện chính 1 Người dùng bấm vào sản phẩm mình muốn mua

2 Người dùng chọn số lượng, phân loại hàng phùhợp

3 Người dùng bấm “Thêm vào giỏ hàng”

4 Sau khi chọn xong các sản phẩm, người dùngnhấn vào biểu tượng “Giỏ hàng” ở góc phải

khi thực hiện use-case

Đơn hàng được thêm vào hệ thống, người dùng đượcđiều hướng trở về trang chủ

Điểm mở rộng Không có

Bảng 3.10 Đặc tả use-case Mua hàng

3.4.6 Use-case “Tra cứu đơn hàng”

Tên chức năng Tra cứu đơn hàng

Tóm tắt Chức năng tra cứu đơn hàng

Dòng sự kiện chính

1 Người dùng bấm vào “Đơn mua”

2 Hệ thống điều hướng đến trang danh sách đơnhàng

3 Người dùng chọn đơn hàng cần tra cứu

4 Hệ thống hiển thị thông tin đơn hàng: thời gianđặt hàng, danh sách sản phẩm, tổng tiền, giảm giá,tình trạng đơn hàng,

Dòng sự kiện khác Không có

Trạng thái hệ thống trước

khi thực thiện use-case Điều kiện: đã đặt đơn hàng

Trạng thái hệ thống sau

khi thực hiện use-case

Người dùng được điều hướng đến trang thông tinđơn hàng để tra cứu

Điểm mở rộng Không có

Bảng 3.11 Đặc tả use-case Tra cứu đơn hàng

Tên chức năng Đánh giá sản phẩm

Tóm tắt Chức năng đánh giá sản phẩm

Dòng sự kiện chính

1 Người dùng chọn đơn hàng đã mua có sản phẩmcần đánh giá

2 Người dùng bấm vào “Đánh giá”

3 Hệ thống hiển thị form để người dùng đánh giá,bao gồm: thanh rating 1-5 sao thể hiện mức độ hàilòng, nội dung mô tả đánh giá

4 Người dùng nhập form và nhấn “Gửi” để hoànthành

Dòng sự kiện khác Không có

Trạng thái hệ thống trước

khi thực thiện use-case Không có

Trạng thái hệ thống sau

khi thực hiện use-case

Đánh giá của người dùng được cập nhật tại thông tincủa sản phẩm đó

2 Hệ thống điều hướng người dùng đến trang danhsách sản phẩm người dùng đã rao bán

3 Người dùng bấm vào “Thêm sản phẩm”

4 Hệ thống hiển thị form để người dùng nhập thôngtin sản phẩm: tên sản phẩm, phân loại hàng, mô tả,hình ảnh,

5 Người dùng nhập thông tin và nhấn “Hoàn tất”

6 Sản phẩm được thêm vào hệ thốngDòng sự kiện khác Không có

Trạng thái hệ thống trước

khi thực thiện use-case Điều kiện: đã đăng nhập tài khoản

Trạng thái hệ thống sau

khi thực hiện use-case

Sản phẩm được thêm thành công vào hệ thống,người dùng được điều hướng trở về trang “Cửa hàngcủa bạn”

Điểm mở rộng Không có

Bảng 3.13 Đặc tả use-case “Bán hàng”

3.4.8 Use-case “Tra cứu đơn bán”

Tên chức năng Tra cứu đơn bán

Tóm tắt Chức năng tra cứu đơn hàng đã bán

Dòng sự kiện chính 1 Người dùng bấm vào “Đơn bán”

2 Hệ thống điều hướng đến trang danh sách đơnhàng đã bán

3 Người dùng chọn đơn hàng cần tra cứu

4 Hệ thống hiển thị thông tin đơn hàng: thời gian

đặt hàng, danh sách sản phẩm, tổng tiền, giảm giá,tình trạng đơn hàng,

5 Người dùng có thể xác nhận đơn hàng hoặc từchối đơn hàng

Dòng sự kiện khác Không có

Trạng thái hệ thống trước

khi thực thiện use-case

Điều kiện: đã có người dùng khác đặt sản phẩm củabạn

Trạng thái hệ thống sau

khi thực hiện use-case

Người dùng được điều hướng đến trang thông tinđơn bán để tra cứu

Điểm mở rộng Không có

Bảng 3.14: Đặc tả use-case Tra cứu đơn bán

3.4.9 Use-case “Quản lý thông tin sản phẩm”

Tên chức năng Quản lý thông tin sản phẩm

Tóm tắt Chức năng quản lý thông tin sản phẩm: sửa thông

tin, xoá sản phẩm

Dòng sự kiện chính

1 Người dùng bấm “Cửa hàng của tôi” và chọn sảnphẩm cần quản lý

2 Hệ thống điều hướng đến trang chi tiết sản phẩm

3 Người dùng có thể bấm vào “Sửa thông tin sảnphẩm” để điều chỉnh thông tin

4 Người dùng có thể bấm vào “Xoá sản phẩm” đểxoá sản phẩm khỏi cửa hàng

Dòng sự kiện khác Không có

Trạng thái hệ thống trước Điều kiện: