Khóa luận xây dựng website thương mại điện tử với chatbot
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (5.85 MB, 100 trang )
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN
KHOA CƠNG NGHỆ PHẦN MỀM
TRẦN ĐỒN PHƯƠNG – 19520230
ĐỖ ĐỨC TÂM - 19520253
KHÓA LUẬN TỐT NGHIỆP
XÂY DỰNG WEBSITE
THƯƠNG MẠI ĐIỆN TỬ VỚI CHATBOT
Building an e-commerce website with a chatbot
KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM
TP. HỒ CHÍ MINH, 2023
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN
KHOA CƠNG NGHỆ PHẦN MỀM
TRẦN ĐỒN PHƯƠNG – 19520230
ĐỖ ĐỨC TÂM- 19520253
KHÓA LUẬN TỐT NGHIỆP
XÂY DỰNG WEBSITE
THƯƠNG MẠI ĐIỆN TỬ VỚI CHAT BOT
Building an e-commerce website with a chatbot
KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM
GIẢNG VIÊN HƯỚNG DẪN
TH.S TRẦN THỊ HỒNG YẾN
TP. HỒ CHÍ MINH, 2023
THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP
Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số ……………………
ngày ………………….. của Hiệu trưởng Trường Đại học Công nghệ Thông tin.
LỜI CẢM ƠN
Trải qua quá trình học tập tại trường Đại học Cơng nghệ Thơng tin, chúng em đã tích
luỹ được nhiều kiến thức và kỹ năng bổ ích. Đầu tiên, nhóm em xin gửi lời cảm ơn chân
thành đến tất cả các thầy, cô giảng dạy tại trường Đại học Công nghệ Thông tin. Các
giảng viên không chỉ là người truyền đạt kiến thức, mà còn là người hướng dẫn, truyền
cảm hứng và tạo động cho sinh viên. Bằng sự am hiểu sâu rộng, các kiến thức và kinh
nghiệm mà các thầy cô chia sẻ sẽ luôn đồng hành cùng nhóm em đến mãi sau này.
Nhóm em cũng xin bày tỏ lòng biết ơn đối với ThS. Trần Thị Hồng Yến, người đã ln
đồng hành, hướng dẫn nhóm em trong q trình thực hiện Khố luận tốt nghiệp.
Cuối cùng nhóm em xin gửi lời cảm ơn đến gia đình, bạn bè đã ln cổ vũ, động viên để
nhóm em có thể hồn thành tốt đề tài lần này.
Thành phố Hồ Chí Minh, ngày 02/07/2023
Nhóm sinh viên thực hiện
Trần Đồn Phương – Đỗ Đức Tâm
MỤC LỤC
Chương 1.
GIỚI THIỆU ĐỀ TÀI ............................................................................. 2
1.1
Tên đề tài ........................................................................................................... 2
1.2
Lí do chọn đề tài................................................................................................ 2
1.3
Mơ tả sản phẩm ................................................................................................. 2
1.4
Chức năng chính ............................................................................................... 2
1.5
Cơng nghệ sử dụng ........................................................................................... 3
1.6
Thơng tin nhóm ................................................................................................. 3
Chương 2.
CƠ SỞ LÝ THUYẾT ............................................................................. 4
2.1
HTML ............................................................................................................... 4
2.2
CSS.................................................................................................................... 5
2.3
JavaScript .......................................................................................................... 5
2.4
Thư viện React.JS ............................................................................................. 7
2.5
Node.JS ............................................................................................................. 8
2.6
Express.JS ......................................................................................................... 9
2.7
MongoDB........................................................................................................ 10
Chương 3.
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .......................................... 12
3.1
Mơ hình hệ thống ............................................................................................ 12
3.2
Sơ đồ Use-case ................................................................................................ 13
3.3
Danh sách các use-case ................................................................................... 14
3.4
Đặc tả use-case ................................................................................................ 15
3.4.1
Use-case “Đăng nhập” ............................................................................. 15
3.4.2
Use-case “Đăng ký” ................................................................................. 16
3.4.3
Use-case “Đăng xuất” .............................................................................. 16
3.4.4
Use-case “Quản lý thông tin cá nhân” ..................................................... 17
3.4.5
Use-case “Mua hàng” ............................................................................... 20
3.4.6
Use-case “Tra cứu đơn hàng” .................................................................. 21
3.4.7
Use-case “Chat với người bán” ................................................................ 22
3.4.8
Use-case “Bán hàng” ................................................................................ 23
3.4.9
Use-case “Tra cứu đơn bán” .................................................................... 24
3.4.10
Use-case “Quản lý thông tin sản phẩm” ............................................... 25
3.4.11
Use-case “Quản lý kho hàng” ............................................................... 26
3.4.12
Use-case “Thống kê” ............................................................................ 28
3.4.13
Use-case “Quản lý mã giảm giá” .......................................................... 28
3.5
Thiết kế dữ liệu ............................................................................................... 31
3.5.1
Sơ đồ logic................................................................................................ 31
3.5.2
Bảng “Account” ....................................................................................... 32
3.5.3
Bảng “Address” ........................................................................................ 32
3.5.4
Bảng “Product” ........................................................................................ 33
3.5.5
Bảng “Color” ............................................................................................ 33
3.5.6
Bảng “ProductInCart” .............................................................................. 34
3.5.7
Bảng “ProductInFavorite” ........................................................................ 34
3.5.8
Bảng “ProductInBill” ............................................................................... 34
3.5.9
Bảng “Bill” ............................................................................................... 35
3.5.10
Bảng “Evalute” ..................................................................................... 35
3.5.11
Bảng “DiscountCode”........................................................................... 35
Chương 4.
XÂY DỰNG WEBSITE ....................................................................... 37
4.1
Thiết kế giao diện ............................................................................................ 37
4.1.1
Danh sách màn hình ................................................................................. 37
4.1.2
Màn hình “Đăng nhập” ............................................................................ 39
4.1.3
Màn hình “Đăng ký” ................................................................................ 40
4.1.4
Màn hình “Trang chủ” ............................................................................. 41
4.1.5
Màn hình “Danh sách sản phẩm” ............................................................. 44
4.1.6
Màn hình “Chi tiết sản phẩm” .................................................................. 46
4.1.7
Màn hình “Giỏ hàng” ............................................................................... 47
4.1.8
Màn hình “u thích” .............................................................................. 49
4.1.9
Màn hình “Yêu cầu đăng nhập” ............................................................... 50
4.1.10
Màn hình “Hồ sơ” ................................................................................. 51
4.1.11
Màn hình “Cửa hàng” ........................................................................... 52
4.1.12
Màn hình “Đơn mua”............................................................................ 54
4.1.13
Màn hình “Đơn bán” ............................................................................. 55
4.1.14
Màn hình “Tài khoản” .......................................................................... 56
4.1.15
Màn hình “Thêm sản phẩm” ................................................................. 57
4.1.16
Màn hình “Mã giảm giá” ...................................................................... 58
4.1.17
Màn hình “Chi tiết đơn mua” ............................................................... 59
4.1.18
Màn hình “Chi tiết đơn bán”................................................................. 60
4.1.19
Màn hình “Sửa sản phẩm” .................................................................... 61
4.1.20
Màn hình “Thêm mã giảm giá” ............................................................ 62
4.1.21
Màn hình “Cập nhật mã giảm giá” ....................................................... 63
4.2
Chatbot hỗ trợ ................................................................................................. 64
4.2.1
Giới thiệu về chat bot FPT.AI .................................................................. 64
4.2.2
Danh sách chức năng sử dụng .................................................................. 65
4.2.3
Chi tiết chức năng .................................................................................... 66
4.2.4
Một số kịch bản đã xây dựng ................................................................... 83
KẾT LUẬN .................................................................................................................. 88
TÀI LIỆU THAM KHẢO ............................................................................................ 89
DANH MỤC HÌNH
Hình 2.1 Cấu trúc file html căn bản ............................................................................... 4
Hình 2.2 Cấu trúc CSS cơ bản [2] .................................................................................. 5
Hình 2.3 Phương thức hoạt động của JavaScript [4] ...................................................... 6
Hình 2.4 Một đoạn code trong trong ứng dụng sử dụng React ...................................... 7
Hình 2.5 Một vài file components trong ứng dụng ........................................................ 8
Hình 2.6 Một đoạn code gọi router từ các tệp định tuyến được định nghĩa ................... 9
Hình 2.7 Một đoạn code sử dụng phương thức định tuyến .......................................... 10
Hình 2.8 Một đoạn code đối tượng tài khoản trong cơ sở dữ liệu................................ 10
Hình 2.9 Một đoạn code gọi hàm xử lý cơ sở dữ liệu .................................................. 11
Hình 3.1 Mơ hình hệ thống........................................................................................... 12
Hình 3.2 Sơ đồ use-case tổng quát ............................................................................... 13
Hình 3.3 Sơ đồ logic dữ liệu ......................................................................................... 31
Hình 4.1 Hình ảnh màn hình “Đăng nhập” .................................................................. 39
Hình 4.2 Hình ảnh màn hình “Đăng ký” ...................................................................... 40
Hình 4.3 Hình ảnh màn hình “Trang chủ” ................................................................... 42
Hình 4.4 Hình ảnh màn hình “Trang chủ” ................................................................... 42
Hình 4.5 Hình ảnh màn hình “Danh sách sản phẩm” ................................................... 44
Hình 4.6 Hình ảnh màn hình “Chi tiết sản phẩm” ........................................................ 47
Hình 4.7 Hình ảnh màn hình “Giỏ hàng” ..................................................................... 47
Hình 4.8 Hình ảnh màn hình “u thích” .................................................................... 49
Hình 4.9 Hình ảnh màn hình “Yêu cầu đăng nhập” ..................................................... 50
Hình 4.10 Hình ảnh màn hình “Hồ sơ” ........................................................................ 51
Hình 4.11 Hình ảnh màn hình “Cửa hàng” .................................................................. 52
Hình 4.12 Hình ảnh màn hình “Đơn mua” ................................................................... 54
Hình 4.13 Hình ảnh màn hình “Đơn bán” .................................................................... 55
Hình 4.14 Hình ảnh màn hình “Tài khoản” .................................................................. 56
Hình 4.15 Hình ảnh màn hình “Thêm sản phẩm” ........................................................ 57
Hình 4.16 Hình ảnh màn hình “Mã giảm giá”.............................................................. 58
Hình 4.17 Hình ảnh màn hình “Chi tiết đơn mua” ....................................................... 59
Hình 4.18 Hình ảnh màn hình “Chi tiết đơn bán” ........................................................ 60
Hình 4.19 Hình ảnh màn hình “Sửa sản phẩm” ........................................................... 61
Hình 4.20 Hình ảnh màn hình “Thêm mã giảm giá”.................................................... 62
Hình 4.21 Hình ảnh màn hình “Cập nhật mã giảm giá”............................................... 63
Hình 4.22 Hình ảnh bắt đầu sử dụng bot ...................................................................... 67
Hình 4.23 Hình ảnh tin nhắn của bot có sẵn nút tính năng .......................................... 68
Hình 4.24 Hình ảnh màn hình thiết kế kịch bản ........................................................... 69
Hình 4.25 Hình ảnh màn hình sơ đồ kịch bản .............................................................. 70
Hình 4.26 Hình ảnh bot trả lời theo tin nhắn cần hỗ trợ............................................... 71
Hình 4.27 Hình ảnh bot trả lời tin nhắn người dùng .................................................... 71
Hình 4.28 Hình ảnh bot trả lời tin nhắn người dùng 2 ................................................. 72
Hình 4.29 Hình ảnh bot trả lời tin nhắn người dùng 3 ................................................. 72
Hình 4.30 Hình ảnh tính năng máy học “Câu mẫu” ..................................................... 73
Hình 4.31 Hình ảnh tính năng máy học “Ý định” ........................................................ 74
Hình 4.32 Hình ảnh tính năng máy học “Loại thực thể” .............................................. 75
Hình 4.33 Hình ảnh tính năng máy học “Từ khóa” ...................................................... 76
Hình 4.34 Hình ảnh tính năng máy học “Từ điển”....................................................... 77
Hình 4.35 Màn hình nhân viên hỗ trợ .......................................................................... 78
Hình 4.36 Hình ảnh màn hình thống kê ....................................................................... 80
Hình 4.37 Hình ảnh màn hình lịch sử ........................................................................... 81
Hình 4.38 Hình ảnh chat bot tương tác với người dùng trên trang web....................... 82
Hình 4.39 Hình ảnh chat bot tương tác với người dùng trên trang facebook ............... 82
Hình 4.40 Kịch bản hồn trả hàng ................................................................................ 83
Hình 4.41 Chatbot gợi ý các sản phẩm ......................................................................... 84
Hình 4.42 Chatbot xác nhận thơng tin đơn hàng .......................................................... 85
Hình 4.43 Chatbot u cầu thơng tin ............................................................................ 86
Hình 4.44 Chatbot u cầu nhập địa chỉ....................................................................... 86
Hình 4.45 Tạo đơn hàng thành cơng ............................................................................ 87
DANH MỤC BẢNG
Bảng 1.1 Thơng tin thành viên nhóm ............................................................................. 3
Bảng 3.1 Danh sách các use-case chính ....................................................................... 14
Bảng 3.2 Đặc tả use-case Đăng nhập ........................................................................... 15
Bảng 3.3 Đặc tả use-case Đăng ký ............................................................................... 16
Bảng 3.4 Đặc tả use-case Đăng xuất ............................................................................ 16
Bảng 3.5 Đặc tả use-case Quản lý thông tin cá nhân ................................................... 17
Bảng 3.6 Đặc tả use-case Chỉnh sửa thông tin cá nhân ................................................ 18
Bảng 3.7 Đặc tả use-case Đổi mật khẩu ....................................................................... 18
Bảng 3.8 Đặc tả use-case Tìm kiếm sản phẩm ............................................................. 19
Bảng 3.9 Đặc tả use-case Mua hàng ............................................................................. 20
Bảng 3.10 Đặc tả use-case Tra cứu đơn hàng .............................................................. 21
Bảng 3.11 Đặc tả use-case Đánh giá sản phẩm ............................................................ 22
Bảng 3.12 Đặc tả use-case “Chat với người bán” ........................................................ 22
Bảng 3.13 Đặc tả use-case “Bán hàng” ........................................................................ 23
Bảng 3.14 Đặc tả use-case Tra cứu đơn bán ................................................................ 24
Bảng 3.15 Đặc tả use-case “Quản lý thông tin sản phẩm” ........................................... 25
Bảng 3.16 Đặc tả use-case “Quản lý kho hàng” ........................................................... 26
Bảng 3.17. Đặc tả use-case “Thống kê” ....................................................................... 28
Bảng 3.18 Đặc tả use-case “Quản lý mã giảm giá”...................................................... 28
Bảng 3.19 Danh sách các bảng dữ liệu ......................................................................... 31
Bảng 3.20 Chi tiết bảng Account ................................................................................. 32
Bảng 3.21 Chi tiết bảng Address .................................................................................. 32
Bảng 3.22 Chi tiết bảng Product ................................................................................... 33
Bảng 3.23 Chi tiết bảng Color ...................................................................................... 33
Bảng 3.24 Chi tiết bảng ProductInCart ........................................................................ 34
Bảng 3.25 Chi tiết bảng ProductInFavorite .................................................................. 34
Bảng 3.26 Chi tiết bảng ProductInBill ......................................................................... 34
Bảng 3.27 Chi tiết bảng Bill ......................................................................................... 35
Bảng 3.28 Chi tiết bảng Evaluate ................................................................................. 35
Bảng 3.29 Chi tiết bảng DiscountCode ........................................................................ 35
Bảng 4.1 Danh sách màn hình ...................................................................................... 37
Bảng 4.2 Bảng danh sách chức năng chat bot .............................................................. 65
TĨM TẮT KHỐ LUẬN
Thương mại điện tử đã trải qua một sự tăng trưởng đáng kể trong những năm
gần đây. Đây là một xu hướng phát triển nhanh chóng và có tiềm năng lớn trong
tương lai nhờ sự phát triển nhanh chóng của cơng nghệ và các thiết bị di động. Thương
mại điện tử đã và đang thể hiện những ưu điểm vượt trội so với thương mại truyền
thống.
Đề tài khố luận của nhóm em xây dựng lần này có tên “Xây dựng website
thương mại điện tử với chatbot”. Mục tiêu đề tài hướng đến là xây dựng được một
website thương mại điện tử đáp ứng được nhu cầu mua và bán sản phẩm một cách dễ
dàng, trong đó tích hợp thêm hệ thống trả lời tự động chatbot là một ứng dụng của trí
tuệ nhân tạo giúp hệ thống tương tác với các khách hàng một cách nhanh chóng và
kịp thời đồng thời nâng cao trải nghiệm cho người dùng.
Trong báo cáo khố luận này, nhóm em sẽ trình bày các nội dung sau:
-
Chương 1. Giới thiệu đề tài: giới thiệu tổng quan về đề tài.
-
Chương 2. Cơ sở lý thuyết: tóm tắt lý thuyết về các cơng nghệ được sử dụng
trong sản phẩm đề tài.
-
Chương 3. Phân tích và thiết kế hệ thống: mơ tả mơ hình hệ thống, các sơ
đồ use-case ứng với mỗi tính năng, phân tích và thiết kế dữ liệu chi tiết.
-
Chương 4. Xây dựng website: trình bày bản thiết kế giao diện chi tiết và
triển khai chatbot trong ứng dụng.
-
Kết luận: nhận xét về ưu điểm, khuyết điểm, và hướng phát triển trong
tương lai.
1
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.
-
Building an e-commerce website with a 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ắm
online 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àn
thươ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, ứng dụng
di động không thể thay thế hồn tồn được website, bởi tính thuận tiện của nó.
Trang web 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ương tác tự động với khách hàng và
giúp khách hàng 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.
2
-
Quản lý thông tin cá nhân.
-
Quản lý mã giảm giá.
-
Chat với người bán.
-
Quản lý kho hàng.
-
Hỗ trợ thanh toán online.
-
Chatbot hỗ trợ.
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.
-
Socket.io: cung cấp khả năng chat real-time.
-
MongoDB: cơ sở dữ liệu.
-
Github: quản lý mã nguồn.
1.6 Thơng tin nhóm
Bảng 1.1 Thơng tin thành viên nhóm
STT
Tên thành viên
Mã sinh viên
1
Trần Đoàn Phương
19520230
2
Đỗ Đức Tâm
19520253
3
Chương 2.
CƠ SỞ LÝ THUYẾT
2.1 HTML
-
HTML là viết tắt của cụm tử Hyper Text Markup Language 5 – ngôn ngữ
đánh dấu siêu văn bản.
-
HTML dùng để xây dựng nội dung của trang web, bao gồm các thành phần
hình ảnh, văn bản, âm thanh, …
-
HTML được tạo ra bởi một nhà vật lý học thuộc trung tâm nghiên cứu
CERN của Thuỵ Sỹ, Tim Berners Lee. Hiện nay HTML đã trở thành một
chuẩn Internet để phát triển website.
-
Phiên bản đầu tiên của HTML được công bố lần đầu tiên vào năm 1991,
bao gồm 18 thẻ cơ bản.
-
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, các tính
năng được bổ sung và hoàn thiện hơn. Hiện nay HTML5 bao gồm khoảng
140 thẻ.
Hình 2.1 Cấu trúc file HTML căn bản
4
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 cho các phần tử HTML, giúp các thành
phần trên trang web được hiển thị rõ ràng, hợp lý và đẹp mắt hơn.
-
CSS được tạo ra bởi Håkon Wium Lie và Bert Bos, ra mắt lần đầu tiên vào
ngày 10 tháng 10 nă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 dạng
cho trang web cũng được đề xuất cùng với CSS, nên đến năm 1996, phiên
bản CSS1 mới chính thức được phát hành.
-
Qua các năm, CSS được phát triển lần lượt các phiên bản CSS2, CSS2.1,
CSS3 và mới nhất là CSS4. Qua các phiên bản, CSS có nhiều nâng cấp về
sự đa dạng thuộc tính, phân chia module.
-
Ví dụ một đoạn mã CSS đơn giản để thiết lập màu chữ và kích thước chữ
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 ở cả phía
máy chủ và máy khách, được xây dựng dựa trên cú pháp của Java. Cú pháp
của JavaScript có nhiều điểm tương đồng với Java.
-
JavaScript chủ yếu được sử dụng cho các website nhằm cung cấp cho người
dùng trải nghiệm tốt hơn, bao gồm các chức năng: tự động cập nhật trang
web, thay đổi nội dung trên trang web, thông báo, xử lý sự kiện, …
5
-
Phiên bản đầu tiên của JavaScrip tên là Mocha, ra mắt vào tháng 5 năm
1995, đổi tên thành LiveScript vào tháng 9 năm 1995, và được đổi tên
thành JavaScript vào tháng 12 năm 1995.
-
Ngày nay, JavaScript trở nên vô cùng phổ biến. Hàng loạt các framework
và thư viện được xây dựng dựa trên ngôn ngữ JavaScript ra đời, được sử
dụng rộng rãi để phát triển các ứng dụng web trên máy khách, điển hình
gồm ReactJS, AngularJS, VueJS.
-
Cách hoạt động của JavaScript:
Hình 2.3 Phương thức hoạt động của JavaScript
-
Khi trình duyệt tải một trang web, HTML parser bắt đầu phân tích cú pháp
và tạo DOM. Khi trình phân tích cú pháp gặp một lệnh, JavaScript engine
sẽ đảm nhận việc thực thi lệnh đó.
-
JavaScript engine tải các tệp JavaScript và các lệnh được nhúng trong mã
HTML, nhưng không chạy ngay lập tức, mà đợi HTML và CSS được phân
tích hồn tất, sau đó JavaScript mới được thực thi theo trình tự chúng được
6
tìm thấy trên trang web. Sau khi thực thi, DOM sẽ được cập nhật bởi
JavaScript và hiển thị lên trình duyệt.
-
Trong đồ án, nhóm em đã sử dụng thư viện của JavaScript là ReactJS để
xây dựng giao diện ứng dụng.
2.4 Thư viện React.JS
-
ReactJS là thư viện JavaScript phổ biến nhất hiện nay để xây dựng giao
diện người dùng (UI). Các ứng dụng được xây dựng bằng ReactJS cho tốc
độ phản hồi và trải nghiệm tuyệt vời, nhờ cơ chế render linh hoạt.
-
Thư viện ReactJS được phát triển bởi Facebook, ra mắt năm 2013, có mã
nguồn mở và hồn tồn miễn phí. Hiện nay có nhiều framework để xây
dựng UI như Angular, VueJS, tuy nhiên ReactJS vẫn được tin dùng trong
các ứng dụng lớn và phức tạp.
-
Ví dụ sử dụng ReactJS khai báo một component sử dụng cú pháp JSX:
Hình 2.4 Một đoạn code trong trong ứng dụng sử dụng React
-
Ưu điểm của ReactJS:
o Dễ sử dụng:
ReactJS có nguồn tài liệu phong phú, nên rất dễ tiếp cận đối
với những người có kiến thức cơ bản về JavaScript.
ReactJS sử dụng cú pháp JSX, cho phép người dùng viết mã
HTML ngay bên trong cấu trúc.
o Tái sử dụng code:
7
Các thành phần trong dự án được đóng gói theo từng phần
riê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ử dụng Virtual DOM (DOM ảo) để thực hiện việc
render các components. Khi một component thay đổi hoặc
thêm vào trang web, Virtual DOM sẽ nạp component vào
như một node trên cây hiển thị, sau đó tự động thực hiện việc
thêm vào DOM thực sao cho tối ưu nhất. Virtual DOM giúp
giảm các thao tác trên DOM thực, điều này giúp hiệu suất
của ứng dụng được tăng lên.
Hạn chế việc tải lại trang, nâng cao trải nghiệm người dùng.
2.5 Node.JS
-
NodeJS là một nền tảng cung cấp môi trường runtime để thực thi
JavaScript, được sử dụng để chạy các ứng dụng web bên ngồi trình duyệt.
-
NodeJS được phát triển bởi Ryan Dahl, ra mắt vào năm 2009. Nền tảng
được xem là một giải pháp tuyệt vời 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 bất đồng bộ.
-
Để sử dụng NodeJS, người dùng cần có những kiến thức nhất định về một
số giao thức, JavaScript, …
-
Ưu điểm:
o Hướng sự kiện bất đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời.
8
o Sử dụng JavaScript – một ngơn ngữ lập trình phổ biến và dễ làm
quen.
o Chia sẻ mã nguồn ở cả phía client và server.
o NPM (Node Package Manager) phát triển, giúp quản lý package,
module dễ dàng.
o Cộng đồng sử dụng đơng đảo, dễ dàng tìm kiếm thơng tin và tài liệu.
o Cho phép stream các file có kích thước lớn.
-
Nhược điểm:
o Khơng có khả năng mở rộng, vì vậy khơng thể tận dụng lợi thế mơ
hình multi core trong các phần cứng của server hiện nay.
o Khó thao tác với cơ sử dữ liệu quan hệ.
o Yêu cầu nắm vững kiến thức về JavaScript.
o Không phù hợp với các ứng dụng đòi hỏi nhiều tài nguyên CPU.
2.6 Express.JS
-
Express.JS hay còn được viết là ExpressJS, là một framework mã nguồn
mở miễn phí cho NodeJS. ExpressJS giúp việc thiết kế và xây dựng các
ứng dụng web trở nên dễ dàng, tiện lợi.
-
ExpressJS sử dụng ngôn ngữ JavaScript để xây dựng nên các API
(Application Programming Interface), được coi là cầu nối kết nối giữa
client và server.
-
Trong ứng dụng của nhóm em xây dựng, ExpressJS được sử dụng để tạo
các routers. 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
9
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 hệ quản trị cơ sở dữ liệu theo dạng NoSQL, có mã nguồn
mở, được phát triển bởi công ty MongoDB. MongoDB cho phép lưu trữ và
truy xuất dữ liệu dưới dạng JSON Document một cách linh hoạt.
-
Vởi khả năng mở rộng cao và các tính năng mạnh mẽ như replica set,
sharding, index phân tán, map-reduce, MongoDB cho phép xử lý các tác
vụ lưu trữ và truy vấn dữ liệu lớn.
-
Trong ứng dụng, nhóm em sử dụng MongoDB để lưu trữ dữ liệu chính.
Hình 2.8 Một đoạn code đối tượng tài khoản trong cơ sở dữ liệu
10
-
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
11
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.1 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.
12
3.2 Sơ đồ Use-case
Website được xây dựng để phục vụ các nhóm người dùng:
Chủ cửa hàng, doanh nghiệp bán lẻ.
Người dùng có nhu cầu mua sản phẩm trực tuyến.
Các yêu cầu về tính năng của hệ thống:
Tính năng quản lý tài khoản, thông tin cá nhân của người dùng, mật khẩu phải
được mã hố.
Tính năng tìm kiếm sản phẩm, quản lý giỏ hàng, danh sách yêu thích.
Tính năng đặt hàng, tra cứu đơn hàng.
Tính năng đăng bán sản phẩm, quản lý cửa hàng (mã giảm giá, thống kê, số
lượng tồn kho).
Hỗ trợ thanh tốn online.
Tích hợp chatbot hỗ trợ.
Hình 3.2 Sơ đồ use-case tổng quát
13
3.3 Danh sách các use-case
Bảng 3.1 Danh sách các use-case chính
STT
Ý nghĩa / Ghi chú
Tên 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
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
8
Mua hàng
Mua sản phẩm
9
Tra cứu đơn hàng
Tra cứu đơn hàng đã mua
10
Chat với người bán
Chat real-time với người bán
11
Đánh giá sản phẩm
Đánh giá sản phẩm đã mua
12
Bán hàng
Đăng bán sản phẩm mới
13
Quản lý kho hàng
Quản lý số lượng sản phẩm
14
Tra cứu đơn bán
Tra cứu đơn hàng đã bán
15
Thống kê
Xem thống kê số lượng đơn hàng
16
Quản lý thông tin sản phẩm
Sửa thông tin, xố sản phẩm
17
Quản lý mã giảm giá
Thêm xóa sửa mã giảm giá
Sửa các thông tin như họ tên, email, số
điện thoại, giới tính, ...
14
