ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
----------

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 :

Nguyễn Hữu Hiếu

Mã số sinh viên 1

18520053

:

Sinh viên thực hiện 2 :

Nguyễn Đặng Phương Nam

Mã số sinh viên 2

:

18521125

Lớp

:

SE122.M21

Bộ môn

:

Phát triển phần mềm

Thành phố Hồ Chí Minh, tháng 6 năm 2022


LỜI CẢM ƠN
Chúng em xin gửi lời cảm ơn tới cơ Trần Thị Hồng Yến, người đã trực tiếp tận
tình hướng dẫn nhóm em trong suốt q trình thực hiện đồ án. Không chỉ gợi ý và định
hướng chúng em thực hiện đề tài, cơ cịn rất nhiệt tình trong đưa ra những nhận xét, góp
ý để em có thể hồn thành đồ án một cách tốt nhất. Nếu khơng có những lời hướng dẫn,
dạy bảo của thầy thì đồ án này rất khó có thể hồn thiện được. Một lần nữa, chúng em
xin chân thành cảm ơn cô.
Đề tài được nhóm thực hiện trong khoảng thời gian 3 tháng nên bước đầu đi vào
thực tế, kiến thức cũng như kinh nghiệm thực tiễn của chúng em còn nhiều hạn chế. Do
vậy, chắc chắn không thể tránh khỏi những sai sót, nhóm rất mong nhận được những sự
chỉ bảo, ý kiến đóng góp q báu của cơ và các bạn học cùng lớp để chúng em có điều
kiện được bổ sung, nâng cao kiến thức của mình trong lĩnh vực này, giúp hồn thiện
hơn và tích lũy thêm cho bản thân nhiều kinh nghiệm, phục vụ tốt hơn cho công việc
thực tế sau này.
Chúng em xin chân thành cảm ơn cơ!

Thành phố Hồ Chí Minh, ngày 03 tháng 06 năm 2022
Nhóm sinh viên thực hiện

NGUYỄN HỮU HIẾU – NGUYỄN ĐẶNG PHƯƠNG NAM


ĐỀ CƯƠNG CHI TIẾT
Tên đề tài: Xây dựng website thương mại điện tử với chatbot tư vấn
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 21/2/2022 đến ngày 10/6/2022
Sinh viên thực hiện:
1. NGUYỄN HỮU HIẾU - 18520053
2. NGUYỄN ĐẶNG PHƯƠNG NAM - 18521125
Nội dung đề tài:(Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực
hiện, kết quả mong đợi của đề tài)
Mục tiêu:
Website thương mại điện tử được thực hiện dựa trên ba mục đích chính sau:
Thứ nhất là nghiên cứu các cơng nghệ lập trình như: lập trình ứng dụng web với
ReactJs, xây dựng hệ thống backend với .NET Core, xây dựng chatbot với
Microsoft Bot Framework.
Thứ hai là phát triển ứng dụng web có tính thực tiễn cao, có khả năng triển khai
ứng dụng vào thực tế, hỗ trợ các shop bán đồ thời trang với nội dung phong phú,
độc đáo, giao diện thân thiện với người dùng, bố cục hợp lý, đáp ứng các chức
năng cần thiết của một website thương mại điện tử. Ngồi ra cịn xây dựng trang
quản trị với các chức năng quản lý thông tin đa dạng và tiện dụng.
Thứ ba là tích hợp chatbot tự động vào website với các kịch bản tư vấn đa dạng
cho khách hàng
Nhóm hy vọng dựa trên nền tảng lý thuyết đã được thầy cô truyền thụ lại, kết hợp
với sự tìm hiểu cơng nghệ của nhóm, đồ án của nhóm sẽ đạt được mục đích mong
đợi.



Phương pháp thực hiện: làm việc với nhóm 02 thành viên, phân chia công việc phù
hợp với năng lực và kinh nghiệm của từng người, thực hiện đồ án theo lượng công
việc và thời gian đã được lập kế hoạch chi tiết. Các vấn đề liên quan đến đồ án đều
được trao đổi trực tiếp giữa các thành viên.
Công nghệ sử dụng:
-

Front-end: ReactJs.

-

Back-end: C# .NET Core.

-

Database: SQL Azure.

-

Chatbot: Microsoft Bot Framework và Facebook Messenger Chatbot.

-

Caching: In-memory-cache.

-

Authentication: Json Web Token.


-

Source Control: Github.

-

Swagger UI - REST API.

Kết quả mong đợi:
Sau khi xác định đề tài và nghiên cứu, tìm hiểu thực tế, nhóm đã xây dựng
ý tưởng thiết kế website bán hàng online đạt được những mục tiêu sau:
-

Đăng nhập, đăng ký.

-

Quản lý danh mục, sản phẩm.

-

Tìm kiếm theo danh mục, sản phẩm.

-

Đặt hàng.

-


Quản lý đơn đặt hàng, giỏ hàng, thanh toán.

-

Chatbot tư vấn.

Đối tượng:
-

Người dùng có nhu cầu mua hàng online.

-

Nhân viên, quản lý của cửa hàng.


Các tiêu chí khác:
Tính thẩm mỹ
-

Phần mềm có giao diện đẹp, dễ sử dụng, bố cục hợp lý cuốn hút người dùng
khi sử dụng.
Tính logic và bảo mật

-

Tạo được sự liên kết logic giữa các màn hình để người dùng có thể chuyển
màn hình một cách nhanh nhất và thuận tiện nhất.

-


Đảm bảo tính bảo mật về các thơng tin nhạy cảm, tạo cảm giác an tồn cho
người dùng.

-

Có thể cập nhật, thêm xóa sửa đổi thơng tin liên quan đến sản phẩm và các
vấn đề khác liên quan khác đến người dùng.

Kế hoạch thực hiện:
Thời gian

Nội dung

21/02/2022 – 20/03/2022

- Tìm hiểu đề tài, xác định các chức năng của

Chuẩn bị kiến thức về cơng nghệ hệ thống.
- Tìm hiểu về Reactjs để xây dựng Frontend.
- Tìm hiểu về Web API C# để xây dựng
Backend.
- Tìm hiểu về Azure SQL để xây dựng
Database online.
- Tìm hiểu về Microsoft Bot Framework và
Facebook Messenger Chatbot để xây dựng
chatbot.
- Tìm hiểu về Json Web Token (JWT) để xác
thực người dùng.



- Tìm hiểu về In-memory-cache để cải thiện
tốc độ caching giúp tăng tốc độ website.
- Tìm hiểu về microservice.
21/03/2022 – 10/04/2022

- Phân tích, xác định, đặc tả chức năng.

Phân tích thiết kế hệ thống

- Xác định các luồng xử lí.
- Thiết kế base source hệ thống.
- Xây dựng CSDL.
- Thiết kế UI.

11/04/2022 – 22/05/2022
Xây dựng ứng dụng

- Xây dựng Frontend bằng Reactjs.
- Xây dựng Backend bằng Web API C#.
- Xây dựng Chatbot.
- Tích hợp API vào ứng dụng web.
- Tích hợp Chatbot vào ứng dụng web.

23/05/2022 – 29/05/2022

- Thực hiện kiểm thử các luồng chức năng.

Kiểm thử và sửa lỗi


- Sửa lỗi, cải thiện giao diện, hoàn thiện ứng
dụng.

30/05/2022 – 10/06/2022

- Hoàn thiện báo cáo.

Hoàn thiện báo cáo

Xác nhận của CBHD

TP. HCM, ngày 5 tháng 03 năm 2022

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

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

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

Nguyễn Đặng Phương Nam
Nguyễn Hữu Hiếu


MỤC LỤC
CHƯƠNG 1 - TỔNG QUAN VỀ ĐỀ TÀI .................................................................... 1
1.1. Giới thiệu về đề tài .............................................................................................. 1
1.2. Khảo sát hiện trạng .............................................................................................. 1
1.3. Đối tượng nghiên cứu .......................................................................................... 4
1.4. Phạm vi nghiên cứu ............................................................................................. 4
1.5. Phương pháp nghiên cứu ..................................................................................... 4

1.6. Nhiệm vụ của đề tài ............................................................................................. 4
CHƯƠNG 2 - CƠ SỞ LÝ THUYẾT ............................................................................. 6
2.1. Tổng quan về ReactJs và Redux .......................................................................... 6
2.1.1. ReactJs .......................................................................................................... 6
2.1.2. Redux ............................................................................................................ 7
2.2. Tổng quan về .NET Core ................................................................................... 10
2.2.1. Giới thiệu .................................................................................................... 10
2.2.2. Khả năng sử dụng ....................................................................................... 10
2.2.3. Thành phần ................................................................................................. 11
2.2.4. Phân biệt .NET Framework, .NET Core và Mono ..................................... 12
2.2.5. Trường hợp sử dụng ................................................................................... 13
2.3. Tổng quan về SQL Azure .................................................................................. 14
2.3.1. Giới thiệu .................................................................................................... 14
2.3.2. Quy trình hoạt động .................................................................................... 15
2.3.3. Các lợi ích của SQL Azure ......................................................................... 17
2.3.4. Sự khác biệt giữa SQL Azure và SQL Server ............................................ 18
2.4. Tổng quan về Microsoft Bot Framework, Azure Bot Service .......................... 19
2.4.1. Khái niệm ................................................................................................... 19


2.4.2. Cấu trúc....................................................................................................... 20
2.4.3. Cách xây dựng một bot với Microsoft Bot Framework ............................. 23
2.5. Tìm hiểu về Facebook Messenger ..................................................................... 25
2.5.1. Tổng quan ................................................................................................... 25
2.5.2. Đánh giá ...................................................................................................... 25
2.5.3. Giới thiệu về Chatbot Facebook ................................................................. 26
2.5.4. Cách hoạt động ........................................................................................... 26
2.5.5. Một số khái niệm cơ bản ............................................................................ 27
2.6. Tìm hiểu về In-Memory-Cache ......................................................................... 28
2.6.1. Đặt vấn đề ................................................................................................... 28

2.6.2. In-Memory-Cache ...................................................................................... 28
2.6.3. Ưu điểm ...................................................................................................... 29
2.6.4. Hạn chế ....................................................................................................... 29
2.7. Tổng quan về JSON Web Token ....................................................................... 30
2.7.1. Giới thiệu .................................................................................................... 30
2.7.2. Các thành phần ........................................................................................... 30
2.7.3. Trường hợp sử dụng ................................................................................... 31
CHƯƠNG 3 - PHÂN TÍCH THIẾT KẾ HỆ THỐNG ................................................. 32
3.1. Mô tả yêu cầu .................................................................................................... 32
3.1.1. Yêu cầu chức năng ..................................................................................... 32
3.1.2. Yêu cầu phi chức năng ............................................................................... 34
3.2. Kiến trúc hệ thống ............................................................................................. 34
3.2.1. Sơ đồ kiến trúc tổng quát ............................................................................ 34
3.2.2. Mô tả kiến trúc Front-End .......................................................................... 35
3.2.3. Mô tả kiến trúc Microsoft Bot Framework ................................................ 37


3.2.4. Mô tả kiến trúc Back-End........................................................................... 38
CHƯƠNG 4 - HIỆN THỰC HỆ THỐNG ................................................................... 40
4.1. Thiết kế dữ liệu .................................................................................................. 40
4.1.1. Danh sách các đối tượng trong hệ thống .................................................... 40
4.1.2. Dữ liệu đối tượng người dùng .................................................................... 41
4.1.3. Dữ liệu đối tượng giỏ hàng ......................................................................... 42
4.1.4. Dữ liệu đối tượng sản phẩm ....................................................................... 43
4.1.5. Dữ liệu đối tượng danh mục ....................................................................... 44
4.1.6. Dữ liệu đối tượng đơn hàng ........................................................................ 44
4.1.7. Dữ liệu đối tượng hóa đơn .......................................................................... 45
4.1.8. Dữ liệu đối tượng lịch sử đơn hàng ............................................................ 46
4.2. Thiết kế giao diện .............................................................................................. 47
4.2.1. Danh sách các màn hình ............................................................................. 47

4.2.2. Sơ đồ liên kết các màn hình........................................................................ 49
4.2.3. Giao diện các màn hình chức năng xác thực người dùng .......................... 50
4.2.4. Giao diện các màn hình chức năng liên quan đến mua hàng ..................... 51
4.2.5. Giao diện các màn hình chức năng liên quan đến quản lý ......................... 58
4.2.6. Giao diện các màn hình chức năng chatbot tư vấn ..................................... 62
4.2.7. Giao diện các màn hình chức năng lưu trữ và thao tác với API................. 66
CHƯƠNG 5 - KẾT LUẬN........................................................................................... 69
5.1. Đánh giá ............................................................................................................. 69
5.1.1. Thuận lợi ..................................................................................................... 69
5.1.2. Khó khăn..................................................................................................... 69
5.2. Kết quả đạt được ................................................................................................ 69
5.2.1. Ưu điểm ...................................................................................................... 69


5.2.2. Nhược điểm ................................................................................................ 70
5.3. Hướng phát triển ................................................................................................ 70
TÀI LIỆU THAM KHẢO ............................................................................................ 71


DANH MỤC BẢNG
Bảng 3.1 Mô tả chức năng của ứng dụng ..................................................................... 33
Bảng 3.2 Mô tả thành phần kiến trúc front-end............................................................ 36
Bảng 3.3 Mô tả thành phần kiến trúc Microsoft Bot Framework ................................ 37
Bảng 3.4 Mô tả thành phần kiến trúc back-end ............................................................ 39
Bảng 4.1 Danh sách các đối tượng trong hệ thống (chức năng) .................................. 40
Bảng 4.2 Mô tả dữ liệu người dùng .............................................................................. 42
Bảng 4.3 Mô tả dữ liệu giỏ hàng .................................................................................. 42
Bảng 4.4 Mô tả dữ liệu người dùng .............................................................................. 44
Bảng 4.5 Mô tả dữ liệu danh mục ................................................................................ 44
Bảng 4.6 Mô tả dữ liệu đơn hàng ................................................................................. 45

Bảng 4.7 Mơ tả dữ liệu hóa đơn ................................................................................... 45
Bảng 4.8 Mô tả dữ liệu lịch sử đơn hàng ..................................................................... 46
Bảng 4.9 Danh sách các màn hình chức năng .............................................................. 48


DANH MỤC HÌNH ẢNH
Hình 1.1 Số liệu và đồ họa: iPrice Group. ...................................................................... 2
Hình 1.2 Top 10 website TMĐT có lượng truy cập cao nhất toàn quốc quý 4/2020 .... 3
Hình 2.1 Các node tượng trưng cho một single page application .................................. 7
Hình 2.2 Luồng dữ liệu theo cấu trúc thơng thường của ReactJS .................................. 8
Hình 2.3 Cấu trúc Redux cùng Middlewares ................................................................. 9
Hình 2.4 Thành phần trong .NET ................................................................................. 12
Hình 2.5 Giao diện đơn giản của kiến trúc SQL Azure ............................................... 14
Hình 2.6 Ba đối tượng cốt lõi trong mơ hình hoạt động của SQL Azure .................... 15
Hình 2.7 SQL Azure Data Sync giúp đồng bộ hóa dữ liệu trên SQL Server ............... 16
Hình 2.8 Cấu trúc của một Microsoft + Azure Bot Service ......................................... 20
Hình 2.9 Phân tích cú pháp văn bản của Microsoft + Azure Bot Service .................... 21
Hình 2.10 Câu đã được phân tích thành dạng Json ...................................................... 22
Hình 2.11 Cách xây dựng một bot với Microsoft Bot Framework .............................. 23
Hình 2.12 Lưu lượng người dùng sử dụng Facebook theo thời gian ........................... 25
Hình 2.13 Chatbot Facebook Messenger...................................................................... 26
Hình 2.14 Cách hoạt động của Chatbot liên kết với Messenger .................................. 26
Hình 2.15 Caching ........................................................................................................ 28
Hình 3.1 Sơ đồ kiến trúc hệ thống ................................................................................ 34
Hình 3.2 Sơ đồ kiến trúc front-end ............................................................................... 35
Hình 3.3 Sơ đồ kiến trúc Microsoft Bot Framework .................................................... 37
Hình 3.4 Sơ đồ kiến trúc back-end ............................................................................... 38
Hình 4.1 Danh sách các đối tượng trong hệ thống (thuộc tính) ................................... 41
Hình 4.2 Đối tượng người dùng ................................................................................... 41
Hình 4.3 Đối tượng giỏ hàng ........................................................................................ 42

Hình 4.4 Đối tượng sản phẩm....................................................................................... 43
Hình 4.5 Đối tượng danh mục ...................................................................................... 44
Hình 4.6 Đối tượng đơn hàng ....................................................................................... 44
Hình 4.7 Đối tượng hóa đơn ......................................................................................... 45
Hình 4.8 Đối tượng lịch sử đơn hàng ........................................................................... 46


Hình 4.9 Sơ đồ liên kết giữa các màn hình chức năng ................................................. 49
Hình 4.10 Giao diện màn hình đăng ký ........................................................................ 50
Hình 4.11 Giao diện màn hình đăng nhập .................................................................... 50
Hình 4.12 Giao diện màn hình trang chủ ..................................................................... 51
Hình 4.13 Giao diện màn hình trang chủ ..................................................................... 52
Hình 4.14 Giao diện màn hình trang tìm kiếm ............................................................. 53
Hình 4.15 Giao diện màn hình trang danh mục (Áo polo nữ)...................................... 54
Hình 4.16 Giao diện màn hình trang chi tiết sản phẩm ................................................ 55
Hình 4.17 Giao diện màn hình giỏ hàng....................................................................... 56
Hình 4.18 Giao diện màn hình trang đặt hàng (B1) ..................................................... 57
Hình 4.19 Giao diện màn hình trang đặt hàng (B2) ..................................................... 57
Hình 4.20 Giao diện màn hình đặt hàng thành cơng .................................................... 58
Hình 4.21 Giao diện màn hình trang chủ trang quản trị ............................................... 58
Hình 4.22 Giao diện màn hình trang quản lý sản phẩm ............................................... 59
Hình 4.23 Giao diện màn hình chức năng thêm sản phẩm ........................................... 59
Hình 4.24 Giao diện màn hình chức năng cập nhật sản phẩm ..................................... 60
Hình 4.25 Giao diện màn hình chức năng xóa sản phẩm ............................................. 61
Hình 4.26 Giao diện màn hình quản lý tài khoản ......................................................... 61
Hình 4.27 Giao diện khi click biểu tưởng hỏi chúng tôi để khởi động chatbot ........... 62
Hình 4.28 Giao diện màn hình chức năng hỏi thơng tin về shop ................................. 62
Hình 4.29 Giao diện màn hình chọn đồ (B1: chọn danh mục + B2: chọn màu sắc) .... 63
Hình 4.30 Giao diện màn hình chọn đồ (B3: chọn kích thước) và kết quả .................. 64
Hình 4.31 Giao diện màn hình khi nhấn vào link chọn đồ của chatbot gửi ................. 64

Hình 4.32 Giao diện màn hình chức năng chọn đồ ngẫu nhiên ................................... 65
Hình 4.33 Giao diện màn hình khi nhấn link chọn đồ ngẫu nhiên của chatbot gửi ..... 65
Hình 4.34 Giao diện màn hình quản lý các API thơng qua Swagger UI...................... 66
Hình 4.35 Giao diện màn hình quản lý chi tiết các API thơng qua Swagger UI ......... 67
Hình 4.36 Giao diện màn hình quản lý khi thực thi các API thông qua Swagger UI .. 68


CHƯƠNG 1 - TỔNG QUAN VỀ ĐỀ TÀI
1.1. Giới thiệu về đề tài
Ngày nay, thương mại điện tử (TMĐT) đã và đang trở thành một lĩnh vực có ảnh
hưởng cực kỳ quan trọng đến tăng trưởng kinh tế của các quốc gia. Sự phát triển của
TMĐT không chỉ làm thuận lợi hóa các hoạt động kinh doanh mà cịn cung cấp nhiều
giá trị mới và đáp ứng những nhu cầu mới của các doanh nghiệp và người tiêu dùng.
Chính vì vậy, mọi quốc gia trên thế giới đều quan tâm đến việc đẩy mạnh phát triển
TMĐT. TMĐT vừa là công cụ, vừa là môi trường để phát triển kinh tế xã hội.
Đại dịch COVID-19 là cơn “ác mộng” đối với nhiều lĩnh vực kinh tế trên toàn
thế giới, nhưng dường như lại là “vận may” của các trang web thương mại điện tử, khi
mua sắm trên mạng là cách duy nhất để có được những thứ người tiêu dùng cần trong
thời kỳ giãn cách xã hội. Với lợi thế mặt hàng phong phú dễ lựa chọn, tra cứu, tìm hiểu,
giá cả minh bạch, người tiêu dùng không phải bỏ công đi đến cửa hàng để chọn lựa
hàng hóa, được vận chuyển đến tận nhà nên khơng ít người vẫn ưu tiên lựa chọn dịch
vụ này. Trong phạm vi đề tài đồ án 2, nhóm nghiên cứu “Xây dựng website thương mại
điện tử với chatbot tư vấn” để có thể hỗ trợ, chia sẻ, giảm bớt sự khó khăn trong việc đi
chợ trực tiếp và góp phần hạn chế gia tăng dịch bệnh, tránh tiếp xúc, tập trung đông
người trong bối cảnh xã hội hiện nay.
1.2. Khảo sát hiện trạng
Ngành hàng thời trang trở thành tâm điểm của thương mại điện tử khi có mức
tăng mạnh về lượng truy cập website lên đến 33% vào nửa cuối 2020.
Báo cáo của iPrice Group và SimilarWeb trong quý IV cho thấy sự thay đổi nhu
cầu mua sắm ở một số ngành hàng và lượng truy cập của top 50 sàn thương mại điện tử

tại Việt Nam.
Trong đó, ngành hàng thời trang trở thành tâm điểm khi có mức tăng trưởng
mạnh về lượng truy cập website lên đến 33% vào nửa cuối 2020, sau khi bị giảm đáng
kể ở hai quý đầu năm. "Một trong những ngun nhân tạo nên cú hích này có thể là do
nhu cầu mặc đẹp có xu hướng đi lên vào dịp lễ hội cuối năm, và là thời điểm chuẩn bị
cho năm mới", nhóm nghiên cứu của iPrice nhận định.
1


Trong khi đó, 2 ngành có tốc độ tăng trưởng nhanh nhất trong đầu năm 2020 là
bách hóa và sức khỏe có xu hướng ổn định trong 6 tháng cuối năm, khi lần lượt đạt mức
tăng 10% và 7%.

Hình 1.1 Số liệu và đồ họa: iPrice Group.

Một trong những lý do giúp tăng trưởng trong tiêu dùng online là tâm lý mua
hàng. Khi đại dịch được kiểm soát tốt tại Việt Nam, tâm lý tiêu dùng tích cực trở lại nên
người dân chi tiêu nhiều hơn. Thêm vào đó, ưu đãi mạnh từ các sàn thương mại điện tử
cùng đối tác trong các chiến dịch cuối năm 2020 như Ngày lễ độc thân (11/11), Black
Friday (27/11), Cyber Monday (30/11), Giảm giá 12/12,...là dịp để người tiêu dùng
tranh thủ sắm sửa những mặt hàng yêu thích.
Riêng về thứ hạng lượt truy cập website của các sàn thương mại điện tử ba
tháng cuối năm 2020 khơng có sự thay đổi so với quý trước đó.
Shopee đạt hơn 68,5 triệu lượt truy cập trung bình mỗi tháng và trở thành sàn có
số lượng truy cập cao nhất, tăng hơn 30,6 triệu so với cùng kỳ năm ngoái (đứng đầu về
lượng truy cập suốt 10 quý liên tiếp).

2



Lượt truy cập vào website của Tiki và Lazada Việt Nam trung bình ba tháng cuối
năm chênh lệch nhau khoảng 1,4 triệu, lần lượt là 22,2 và 20,8 triệu lượt. Trong khi
Sendo duy trì ở vị trí thứ 6 với mức 11,2 triệu lượt truy cập hàng tháng.

Hình 1.2 Top 10 website TMĐT có lượng truy cập cao nhất tồn quốc quý 4/2020

3


1.3. Đối tượng nghiên cứu
Đồ án này hướng đến nghiên cứu các đối tượng sau:
❖ Các công nghệ:
o ReactJs
o .NET Core
o SQL Azure
o Microsoft Bot Framework
o Facebook Messenger Chatbot
o In-Memory Cache
o JSON Web Token
o Github
o Swagger UI – Rest API
❖ Đối tượng trong phạm vi đề tài hướng đến:

o Những người dùng có nhu cầu mua hàng thời trang online.
o Nhân viên, quản lý của cửa hàng.
1.4. Phạm vi nghiên cứu
Đề tài tập trung vào nghiên cứu về ứng dụng website thương mại điện tử và
chatbot tư vấn. Sản phẩm của đề tài là ứng dụng website giúp cho chủ cửa hàng thời
trang có thể quản lý shop của mình thơng qua phần mềm và giúp khách hàng có thể tìm
đến và mua hàng thời trang online. Ngồi ra, với chatbot tư vấn có thể giúp khách hàng

chọn lựa sản phẩm để mua một cách nhanh chóng, tiện lợi và chính xác.
1.5. Phương pháp nghiên cứu
Nhóm đã sử dụng các phương pháp nghiên cứu:
-

Phương pháp đọc tài liệu.

-

Phương pháp phân tích các ứng dụng website hiện có.

1.6. Nhiệm vụ của đề tài
Đề tài “Xây dựng website thương mại điện tử với chatbot tư vấn” là một ứng
dụng website chạy trên môi trường web đáp ứng các yêu cầu sau:
4


-

Cung cấp cho nhân viên, quản lý của cửa hàng một phần mềm có thể quản lý cửa
hàng của mình một cách xuyên suốt, thông minh chỉ cần thông qua phần mềm.

-

Cung cấp một giao diện hiện đại, dễ dàng sử dụng cho cả người bán và người
mua.

-

Cung cấp đa dạng các mặt hàng, danh mục sản phẩm cho người dùng.


-

Cung cấp khả năng tra cứu sản phẩm một cách thông minh.

-

Cung cấp cho người dùng khách hàng một trải nghiệm mua sắm xun suốt. Có
thể chỉ cần thơng qua ứng dụng website có thể đặt hàng, thanh tốn và nhanh
hàng nhanh chóng, tiện lợi.

-

Cung cấp Chatbot tư vấn cho khách hàng lựa chọn sản phẩm một cách thông
minh.
Mục tiêu của đề tài là:

-

Tìm hiểu xây dựng một ứng dụng website chạy trên mơi trường production.

-

Tìm hiểu về kiến trúc hệ thống, những công nghệ liên quan.

-

Xây dựng thành công ứng dụng thương mại điện tử, trang quản trị ứng dụng và
chatbot tư vấn.


5


CHƯƠNG 2 - CƠ SỞ LÝ THUYẾT
2.1. Tổng quan về ReactJs và Redux
2.1.1. ReactJs
React (hay React.js, ReactJS) là một thư viện JavaScript hướng đến xây dựng
giao diện người dùng. React là mã nguồn mở được phát triển bởi Facebook và cộng
đồng những nhà lập trình.
React đang nổi lên trong những năm gần đây theo xu hướng Single Page
Application. React hỗ trợ xây dựng những thành phần giao diện (components) có tính
tương tác và tái sử dụng cao. Chính vì vậy mà những website khi sử dụng React chạy
mượt, nhanh, có khả năng mở rộng cao và cũng khơng q khó để hiện thực. React cho
phép nhúng code HTML, CSS trong code JavaScript nhờ vào JSX, giúp cho lập trình
viên có thể dễ dàng lồng ghép HTML, CSS vào trong JavaScript một cách tự nhiên hơn.
Ngồi ra, cịn thể sử dụng React để render dữ liệu từ người dùng.
React được xây dựng dựa trên khái niệm component. Một component đại điện
cho một thành phần giao diện người dùng có khả năng tái sử dụng từ đơn giản đến phức
tạp, các component được lồng nhau tạo nên cấu trúc phân cấp, từ các component nhỏ
có thể xây dựng nên các component lớn hơn. Một component có thể nhận những tham
số từ component khác và có trạng thái riêng biệt. Các component cịn có tổ chức phân
cấp cho phép cho thể tương tác và phụ thuộc lẫn nhau.
Các ưu điểm của React:
-

Dễ dàng nhúng HTML, CSS vào trong React component bởi JSX.

-

Xây dựng giao diện từ các component, và React cũng cho phép tái sử

dụng các component này, giúp việc rút gọn thời gian lập trình và dễ dàng
quản lý các component hơn.

-

React có nhiều cơng cụ phát triển giúp cho việc debug code một dễ dàng
hơn.

-

Hiệu suất tốt hơn với Virtual DOM. React cho phép xây dựng các Virtual
DOM, khi có sự thay đổi trong DOM thực tế thì Virtual DOM sẽ thay đổi
ngay lập tức.

6


-

React triển khai luồng dữ liệu một chiều, được truyền từ cha đến con
thơng qua thuộc tính (props), điều này giúp chúng ta dễ dàng suy luận và
kiểm soát luồng logic hơn so với kiểu ràng buộc dữ liệu truyền thống. Cịn
giúp cho q trình phát hiện lỗi, bảo trì và nâng cấp một cách hiệu quả
hơn.

2.1.2. Redux
Vấn đề quản lý trạng thái là một vấn đề khá phức tạp khi xây dựng giao diện
người dùng. Khi giao diện có độ phức tạp cao, các thành phần giao diện lồng nhau và
rẽ nhánh nhiều khiến việc quản lý trạng thái của từng thành phần càng khó khăn hơn.
Trong ReactJS khi một dữ liệu thay đổi sẽ ảnh hưởng tới nhiều component cùng

lúc vì trạng thái được chia sẻ từ component cha cho các component con. Vấn đề xuất
hiện chúng ta khi muốn chia sẻ các trạng thái qua nhiều component sẽ gây tăng độ phức
tạp quản lý state, tăng tính kết dính và làm có các component khó tái sử dụng hơn.
Để giải quyết vấn đề đó, Redux được xây dựng với ý tưởng tập trung hóa trạng
thái của các đối tượng, từ đó giúp việc quản lý trạng thái dễ dàng và tốt hơn.
Ví dụ: Chúng ta có 1 ứng dụng các node như trong hình là tượng trưng cho một
single page application.

Hình 2.1 Các node tượng trưng cho một single page application

Giả sử có một hành động nào đó được kích hoạt ở node d3 và ta muốn thay đổi
trạng thái (state) ở d4 và c3 thì luồng dữ liệu sẽ được truyền từ node d3 trở về node a
rồi từ node a mới truyền được đến các node d4 và c3.

7


Hình 2.2 Luồng dữ liệu theo cấu trúc thông thường của ReactJS

Với những bài tốn nhỏ thì chúng ta hồn tồn có thể dùng ReactJs để cập nhật
các trạng thái (state) một cách dễ dàng mà không cần dùng đến Redux. Nhưng nếu là
một bài tốn lớn thì việc chỉ sử dụng ReactJs để cập nhật các trạng thái (state) là một
khó khăn rất là lớn. Từ những nhược điểm trên thì Redux ra đời nhằm khắc phục nhược
điểm đó, ta chỉ cần dispatch một action từ node d3 về store rồi d4 và c3 chỉ cần connect
tới store và cập nhật data thay đổi thế là bài toán được giải quyết một cách dễ dàng.
Redux được xây dựng dưa trên 3 thành phần chính:
• Action: Một action là một đối tượng thuần JavaScript. Một action có hai
thuộc tính chính là type và payload. Type là định danh nhằm phân loại các
action, payload chứa các thông tin cụ thể liên quan đến action. Bên cạnh đó
để tạo ra một action bằng cách gọi action creator, thực chất là một hàm trả

về một đối tượng action.
• Reducer: một reducer là một hàm nhận vào trạng thái hiện tại và đối tượng
action, cập nhật trạng thái nếu cần thiết và trả về trạng thái sau khi cập nhật.
Reducer không được phép chỉnh sửa trạng thái thay vào đó phải tạo một trạng
thái mới.
• Store: Chứa tất cả trạng thái của ứng dụng, được thay đổi bởi reducer khi
nhận vào các action.

8


Hình 2.3 Cấu trúc Redux cùng Middlewares

Bên cạnh đó, Redux có các middleware cho phép dispatch một function thay vì
một object để để xử lý các logic bất đồng bộ (asynchronous) phức tạp.

9


2.2. Tổng quan về .NET Core
2.2.1. Giới thiệu
.NET Core là một framework được Microsoft phát triển. Đây là một nền tảng
phát triển đa mục đích. .Net Core là nền tảng chéo (hỗ trợ Windows, macOS và Linux)
và có thể được sử dụng để xây dựng các ứng dụng thiết bị, đám mây và IoT.
.NET Core hỗ trợ các ngôn ngữ như: C# và F# (và C++/CLI kể từ 3.1; chỉ được
bật trên Windows) và nó cịn hỗ trợ một phần của Visual Basic .NET.
Cụ thể:
•

C#: Là loại ngơn ngữ lập trình phát triển theo hướng đối tượng và mục đích.


•

F#: Là loại ngơn ngữ lập trình cho chức năng đa nền tảng, mã nguồn mở. Nó
cũng thường bao gồm lập trình cho hướng đối tượng và mệnh lệnh.

•

Visual Basic: Là ngơn ngữ lập trình có cú pháp đơn giản giúp xây dựng cho các
ứng dụng hướng tới đối tượng an tồn.
Những cơng cụ (gọi tắt là IDE) để lập trình với .NET core:

•

Visual Studio

•

Visual Studio Code

•

Sublime Text

•

Vim
Các phiên bản .NET Core được ra đời từ năm 2016 đã phát triển rất đều đặn và

nhận được những sự tiếp đón từ phía cộng đồng lập trình viên. Trong đó bản được đánh

giá là ổn định và được ưa chuộng nhất chính là 3.1.2.
2.2.2. Khả năng sử dụng
ASP.NET đã xuất hiện cách đây 15 năm trước. Nó là một phần của .NET
Framework. Nó đã có hàng triệu lập trình viên đã sử dụng để xây dựng những ứng dụng
web. Và Microsoft đã phát triển thêm nhiều tính năng mới qua từng năm.
ASP.NET Core có một số thay đổi lớn. Từ việc học hỏi các framework module
hóa khác. ASP.NET Core khơng cịn dựa trên System.Web.dll nữa. Mà được dựa trên
một tập hợp các gói, các module hay cũng được gọi là các Nuget packages.
Với ASP.NET Core bạn có thể:
•

HTTP request được tối ưu nhẹ hơn.
10


•

Hợp nhất xây dựng web UI và web APIs.

•

Tích hợp những client-side frameworks hiện đại và có những luồng phát triển.

•

Hệ thống cấu hình dựa trên mơi trường đám mây thật sự.

•

Dependency injection được xây dựng sẵn.


•

Có thể host trên IIS hoặc self-host trong process của riêng bạn.

•

Được xây dựng trên .NET Core, hỗ trợ thực sự app versioning.

•

Những cơng cụ mới để đơn giản hóa q trình phát triển web tối ưu.

•

Xây dựng và chạy đa nền tảng(Windows, Mac và Linux).

•

Mã nguồn mở và tập trung vào cộng đồng.

2.2.3. Thành phần
.NET Core bao gồm các nền tảng: .NET Compiler Roslyn, .NET Core
framework CoreFX, .NET Core runtime CoreCLR, và ASP.NET Core.
Cấu trúc của.Net Core chi tiết
•

CoreFX: Nó được xem là nền tảng thư viện dành cho .NET Core.

•


CoreCLR: Đây là cơng cụ thực thi .Net trong .Net Core. Nó hỗ trợ thực hiện một
số chức năng như thu gom và biên dịch rác thành mã máy.

•

.Net Core runtime: Sẽ cung cấp một kiểu hệ thống, tải lắp ráp, trình thu gom rác
và các dịch vụ cơ bản khác.

•

Net Core runtime: Cung cấp framework để việc xây dựng các ứng dụng hiện đại
tối ưu, dựa trên đám mây, ứng dụng web, kết nối internet,…

•

.Net Core SDK và trình biên dịch ngơn ngữ (Roslyn và F#): giúp cho phép phát
triển .Net Core

•

Lệnh dotnet: Lệnh dùng cho việc khởi chạy ứng dụng .NET Core và các lệnh
CLI.

11


Hình 2.4 Thành phần trong .NET

2.2.4. Phân biệt .NET Framework, .NET Core và Mono

Với người mới làm quen với .NET hay kể cả một số người đã làm việc với .NET
lâu năm. Những thuật ngữ, khái niệm như .NET Framework, Mono hay .NET core vẫn
hay gây ra nhầm lẫn. Về cơ bản thì .NET Framework, .NET core và Mono là ba phiên
bản .NET khác nhau (có nghĩa là mỗi phiên bản có Runtime, Libraries và Toolings
riêng). Dưới đây là sự khác biệt giữa ba phiên bản đó:
▪

.NET Framework: Được Microsoft đưa ra chính thức từ năm 2002. .NET
Framework chỉ hoạt động trên hệ điều hành Windows. Những nền tảng như:
WPF, Winforms, ASP.NET(1-4) hoạt động dựa trên .NET Framework.

▪

Mono là phiên bản cộng đồng giúp mang .NET đến những nền tảng ngoài
Windows. Mono được phát triển để xây dựng những ứng dụng với giao diện
người dùng và được sử dụng rất rộng rãi như: Unity Game, Xamarin…

▪

.NET core: Đến năm 2013, Microsoft định hướng đa nền tảng và phát triển .NET
core. .NET core hiện được sử dụng trong các ứng dụng Universal Windows
platform và ASP.NET Core.

12