SỞ GIÁO DỤC VÀ ĐÀO TẠO

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

TP.HCM
KHOA CÔNG NGHỆ THÔNG TIN
---------***--------

KHÓA LUẬN TỐT NGHỆP

Chuyên ngành: HỆ THỐNG THÔNG TIN
ĐỀ TÀI:
XÂY DỰNG WEBSITE BÁN ĐỒ NỘI THẤT
Họ và tên: Phạm Thành Trung 17110394
Huỳnh Hữu Trí 17110389
Lớp: 171101S
Khóa: 2017-2021
GVHG: Thầy Nguyễn Thành Sơn

TP.HCM, ngày 20 tháng 06 năm 2021

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

KHOA CNTT Độc lập- Tự do- Hạnh phúc

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

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Phạm Thành Trung MSSV: 17110394

Họ và tên Sinh viên 2: Huỳnh Hữu Trí MSSV: 17110389

Ngành: Công nghệ Thông tin

Tên đề tài: XÂY DỰNG WEBSITE NỘI THẤT

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

NHẬN XÉT

1. Về nội dung đề tài & khối lượng thực

hiện: ..................................................................................................................................
......... .................................................................................................................................
.......... 2. Ưu
điểm: .................................................................................................................................
...........................................................................................................................................
.......... 3. Khuyết
điểm ..................................................................................................................................
...........................................................................................................................................
......... 4. Đề nghị cho bảo vệ hay không?

5. Đánh giá loại:

6. Điểm:

Tp. Hồ Chí Minh, ngày…tháng…năm 2021

Giáo viên hướng dẫn (Ký & ghi rõ họ tên)

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

KHOA CNTT Độc lập- Tự do- Hạnh phúc

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

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Phạm Thành Trung MSSV: 17110394

Họ và tên Sinh viên 2: Huỳnh Hữu Trí MSSV: 17110389

Ngành: Công nghệ Thông tin

Tên đề tài: XÂY DỰNG WEBSITE NỘI THẤT

Họ và tên Giáo viên phản biện:

NHẬN XÉT

1. Về nội dung đề tài & khối lượng thực

hiện: ..................................................................................................................................
......... .................................................................................................................................
.......... 2. Ưu
điểm: .................................................................................................................................
...........................................................................................................................................
.......... 3. Khuyết
điểm ..................................................................................................................................
...........................................................................................................................................
......... 4. Đề nghị cho bảo vệ hay không?

5. Đánh giá loại:

6. Điểm:

Tp. Hồ Chí Minh, ngày…tháng…năm 2021

Giáo viên hướng dẫn (Ký & ghi rõ họ tên)

LỜI CẢM ƠN

3
Trong quá trình nghiên cứu đề tài, các giảng viên đã luôn hỗ trợ, giải đáp các thắc mắc
hướng dẫn chúng em. Cảm ơn thầy đã hỗ trợ chúng em trong thời gian qua.
Đặc biệt, xin gửi lời cảm ơn chân thành nhất đến thầy Nguyễn Thành Sơn – giáo viên
hướng dẫn Khóa luận tốt nghiệp– Khoa công nghệ thông tin – Đại học Sư phạm Kỹ
thuật Tp. Hồ Chí Minh, đã hướng dẫn, quan tâm, góp ý và luôn đồng hành cùng nhóm
trong những giai đoạn khó khăn nhất của đề tài.
Với những kinh nghiệm thực tiễn còn thiếu sót và kinh nghiệm chuyên môn còn
non yếu, bài báo cáo vẫn có những thiếu sót và hạn chế nhất định. Kính mong nhận
được những phản hồi, đóng góp ý kiến và chỉ bảo thêm của quý thầy cô để nhóm có
thể đạt được những kiến thức hữu ích nhất, nâng cao ý thức để phục vụ cho kỹ năng
sau này.

Xin chân thành cảm ơn!

Trường ĐH Sư Phạm Kỹ Thuật TP.HCM

4
Khoa : CNTT

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và Tên SV thực hiện 1 : Phạm Thành Trung Mã Số SV : 17110394

Họ và Tên SV thực hiện 2 : Huỳnh Hữu Trí Mã Số SV : 17110389

Thời gian làm luận văn : Từ : 15/03/2021 Đến : 30/06/2021

Chuyên ngành : Hệ thống thông tin

Tên luận văn : Xây dựng website bán đồ nội thất bằng công nghệ Mern Stack

GV hướng dẫn : Nguyễn Thành Sơn

Nhiệm Vụ Của Luận Văn :

 Trước tiên cần nắm kỹ về ngôn ngữ lập trình Javascript, tìm hiểu về Framework và
cơ sở dữ liệu để thực hiện tiểu biểu là NodeJS, Express, ReactJS và MongDB
chúng ta cần hiểu về cách hoạt động của chúng, phải trải qua quá trình làm việc với
những Framework này trước đó nếu không sẽ rất khó khăn trong việc viết một ứng
dụng hoàn chỉnh.
 Cần phải tìm hiểu các trang web có cấu trúc tương tự ví dụ như tiki, lazada,…tìm
hiểu cấu trúc chương trình cơ sỡ dữ liệu, để đi đúng hướng phát triển tránh ứng
dụng làm ra không được áp dụng rộng rãi.
 Cuối cùng phải đưa ra sự lựa chọn tổ chức ứng dụng của chúng ta theo cách nào.
Sau đó đi vào thiết kế cơ sở dữ liệu, phân chia công việc tiến hành thực hiện xây
dựng server, viết các API, Xây dựng giao diện và thực hiện từng chức năng bằng
cách kết nối từng API với giao diện chức năng.

KẾ HOẠCH THỰC HIỆN

5
 GHI
STT THỜI GIAN CÔNG VIỆC
CHÚ
15/03/2021- Hoàn
1 Viết giao diện và API login, register
20/03/2021 thành
21/03/2021- Viết giao diện và API cho trang danh mục sản Hoàn
2
27/03/2021 phẩm thành
29/03/2021- Hoàn
3 Xây dựng thêm trang seller
03/04/2021 thành
05/04/2021- Hoàn
4 Xây dựng lại giao diện cho trang admin
12/04/2021 thành
13/04/2021- Xây dựng chức năng quản lý danh mục quản lý Hoàn
5
30/04/2021 sản phẩm, các đơn hàng và doanh thu cho admin thành
Load data trên giao diện người dùng và thêm các
01/05/2021- Hoàn
6 trang cần thiết như đánh giá, trang xem thông tin
03/05/2021 thành
người bán
07/05/2021- Cải thiện giao diện người dùng thêm thanh toán Hoàn
7
10/05/2021 momo thành
Xây dựng thêm các chức năng trên seller như
12/05/2021- Hoàn
8 giảm giá, trả lời đánh giá của khách hàng, các
30/05/2021 thành
chức năng thông báo khi có đơn hàng mới.
01/06/2021- Hoàn
9 Fix bug và viết lại báo cáo
11/06/2021 thành

6
MỤC LỤC

DANH SÁCH HÌNH ẢNH........................................................................................................9

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

1.1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI....................................................................................11

1.2. MỤC ĐÍCH CỦA ĐỀ TÀI...............................................................................................11

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

1.4. KẾT QUẢ DỰ KIẾN........................................................................................................12

1.5. NHỮNG NỘI CHỨC NĂNG ĐÃ HOÀN THÀNH TRONG TIỂU LUẬN....................12

1.6. CÁC CHỨC NĂNG ĐÃ HOÀN THIỆN THÊM TRONG KHÓA LUẬN......................12

PHẦN 2: NỘI DUNG.............................................................................................................14

CHƯƠNG 1: CÔNG NGHỆ MERN STACK......................................................................14

I. Ý NGHĨA VỀ MERN...........................................................................................................14

II. LỊCH SỬ PHÁT TRIỂN......................................................................................................14

1. Lịch sử phát triển Reactjs.....................................................................................................14
2. Lịch sử phát triển NodeJS.....................................................................................................15
3. Lịch sử phát triển MongoDB................................................................................................15

CHƯƠNG 2: CÀI ĐẶT VÀ TRIỂN KHAI..........................................................................16

I. CÁCH CÀI ĐẶT VỚI NODE.JS..........................................................................................16

II. CÀI ĐẶT VỚI EXPRESS...................................................................................................17

III. CÀI ĐẶT VỚI REACT......................................................................................................18

IV. CÀI ĐẶT VÀ KẾT NỐI CƠ SỞ DỮ LIỆU VỚI MONGODB.........................................18

CHƯƠNG 3: TÌM HIỂU CÁC TRANG WEB BÁN ĐỒ NỘI THẤT...............................23

I. TRANG WEB BÁN ĐỒ NỘI THẤT NHADEP.COM.VN.................................................23

1.Giới thiệu trang web..............................................................................................................23
2.Các đặc điểm của trang web..................................................................................................24
7
3.Ưu nhược điểm của trang web...............................................................................................24

II. TRANG WEB NHAXINH.COM........................................................................................25

1.Giới thiệu trang web..............................................................................................................25
2.Các đặc điểm của trang web..................................................................................................25
3.Ưu nhược điểm của trang web...............................................................................................26

III. TRANG WEB HOMEOFFICE.COM.VN.........................................................................26

1.Giới thiệu trang web..............................................................................................................26
2.Đặc điểm trang web...............................................................................................................27
3.Ưu nhược điểm trang web.....................................................................................................28

IV. TRANG WEB GO HOME.................................................................................................28

1.Giới thiệu trang web..............................................................................................................28
2.Đặc điểm trang web...............................................................................................................29
3.Ưu nhược điểm trang web.....................................................................................................29

V. TRANG WEB NOITHATHOAPHAT.PRO.......................................................................30

1. Giới thiệu trang web.............................................................................................................30
2.Đặc điểm trang web...............................................................................................................31
3.Ưu nhược điểm trang web.....................................................................................................31

CHƯƠNG 4: PHÂN TÍCH WEBSITE BÁN ĐỒ NỘI THẤT...........................................33

I.MÔ TẢ WEBSITE.................................................................................................................33
1. Lý do chọn đề tài..................................................................................................................33
2.Các chức năng có thể xây dựng.............................................................................................33

II. CÁC THÀNH PHẦN CẦN CÓ ĐỂ WEBSITE CÓ THỂ HOẠT ĐỘNG ỔN ĐỊNH........34
1.Tên miền................................................................................................................................34
2.Thiết kế Website....................................................................................................................34
3.Hosting...................................................................................................................................35
4.Mô tả giao diện các webpage.................................................................................................35

III. USE CASE HỆ THỐNG....................................................................................................36

IV. Mô Tả Use Case.................................................................................................................39

1. Use case đăng nhập...............................................................................................................39
2. Use case thêm danh mục.......................................................................................................39
3. Use case sửa danh mục.........................................................................................................40
4. Use case quản lý danh mục...................................................................................................41

8
5. Use case duyệt sản phẩm......................................................................................................42
6. Use case xác nhận đánh giá..................................................................................................42
7. Use case thêm sản phẩm.......................................................................................................43
8. Use case gửi đơn hàng..........................................................................................................44

V. SƠ ĐỒ ACTIVITY..............................................................................................................45
1.Đăng nhập..............................................................................................................................45
2.Giỏ hàng.................................................................................................................................46
3. Tìm kiếm sản phẩm..............................................................................................................46
4.Đánh giá sản phẩm.................................................................................................................47
5. Thêm danh mục....................................................................................................................48
6. Cập nhật danh mục...............................................................................................................49
7. Đặt hàng................................................................................................................................50

VI. THIẾT KẾ CƠ SỞ DỮ LIỆU............................................................................................51

1.Các collection........................................................................................................................51
2. Nhập dữ liệu cho cơ sở dữ liệu............................................................................................59

VII. MÔ TẢ CẤU TRÚC CHƯƠNG TRÌNH VÀ CÁC TRANG WEB.................................60

1. Mô tả cấu trúc chương trình..................................................................................................60
2. Thiết kế các trang web..........................................................................................................60

PHẦN 3: KẾT LUẬN.............................................................................................................62

CHƯƠNG 1: KẾT QUẢ ĐẠT ĐƯỢC..................................................................................62

I. CÔNG NGHỆ .......................................................................................................................62

II. CHỨC NĂNG ỨNG DỤNG...............................................................................................62

CHƯƠNG 2: ĐÁNH GIÁ ƯU NHƯỢC ĐIỂM...................................................................66

CHƯƠNG 3: HƯỚNG DẪN CHẠY ỨNG
DỤNG………………………………...67

9
 DANH SÁCH HÌNH ẢNH

Hình 1. Trang chủ cài đặt Node..........................................................................16

Hình 2. Màn hình terminal tạo mới project nodejs..............................................17
Hình 3.Màn hình terminal cài đặt framework express.........................................17
Hình 4.Màn hình cài ReactJS sử dụng ở global...................................................18
Hình 5. Giao diện cài đặt MongoDB...................................................................18
Hình 6. Giao diện của MongoDB Compass........................................................19
Hình 7.Giao diện các collection trong MongoDB Compass................................20
Hình 8. Cài đặt gói package................................................................................20
Hình 9. Kết nối với MongoDB ở local................................................................21
Hình 10. Tạo mới collection................................................................................21
Hình 11.Data được lưu vào MongoDB...............................................................22
Hình 12. Ảnh trang chủ nhà đẹp..........................................................................23
Hình 13. Ảnh trang chủ nhà xinh........................................................................25
Hình 14.Ảnh trang chủ Home Office..................................................................27
Hình 15.Ảnh trang chủ gỗ trang trí.....................................................................29
Hình 16.Ảnh trang chủ HoaPhat.........................................................................31
Hình 17. Ảnh usecase admin...............................................................................36
Hình 18. Ảnh usecase seller................................................................................37
Hình 19. Ảnh usecase client................................................................................38
Hình 20. Sơ đồ biểu diễn đăng nhập...................................................................45
Hình 21. Sơ đồ biễu diễn giỏ hàng......................................................................46
Hình 22. Sơ đồ biểu diễn tìm kiếm sản phẩm......................................................46
Hình 23. Sơ đồ biểu diễn đánh giá sản phẩm......................................................47
Hình 24. Sơ đồ biểu diễn thêm danh mục sản phẩm...........................................48
Hình 25. Sơ đồ biểu diễn cập nhật danh mục......................................................49
Hình 26. Sơ đồ biểu diện quá trình đặt hàng.......................................................50
Hình 27. Erd của ứng dụng.................................................................................51
Hình 28. Mô tả cấu trúc chương trình.................................................................59
Hình 29.Thông báo trên seller.............................................................................63
Hình 30.Thông tin seller trên trang chủ...............................................................64
Hình 31.Seller trả lời đánh giá............................................................................65
10
Hình 32.Giao diện lưu trữ data trên mongo compass..........................................66
Hình 33.File .env trong visual studio code..........................................................67
Hình 34. Terminal chạy backend........................................................................68
Hình 35.Chạy frontend trên terminal...................................................................69

11
 PHẦN 1: MỞ ĐẦU

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

Hiện nay việc tạo ra trang web cũng như nhu cầu sử dụng ngày cao các công ty thiết
kế web sẽ phải cạnh tranh rất cao về giá cả cũng như chất lượng sản phẩm tạo ra nên
việc lựa chọn các công nghệ khác nhau để thiết kế web để tạo ra một sản phẩm tốt đáp
ứng người dùng thì việc lựa chọn Mern Stack để thiết kế trang web nó đem lại những
lợi ích như sau:

Dễ thực hiện và linh hoạt nó cung cấp cho nhà phát triển đầy đủ ngăn xếp để tạo ra và
phát triển một trang web từ đầu đến cuối khi thực hiện.
Có nguồn mở trong các khung và được hỗ trợ bởi các hỗ trợ cộng đồng tốt và một bộ
công cụ kiểm tra mở rộng được xây dựng sẵn.
Tính khả thi của bốn công nghệ tốt nhất là MongoDB, ExpressJS, ReactJS và NodeJS.
Giúp phát triển web yêu cầu cao tạo cho người dung có trải nghiệm tốt nhất khi sử
dụng.
Nguồn mở trong các khung và được hỗ trợ bởi các hỗ trợ cộng đồng tốt. Làm chủ cả
phần thuật toán, logic, các thành phần thiết kế và trải nghiệm người dùng [9].
1.2. MỤC ĐÍCH CỦA ĐỀ TÀI
Học và hiểu sâu hơn về ngôn ngữ lập trình Javascript thông qua việc viết một ứng
dụng web thực tế, một trang web bán đồ nội thất bằng cách sử dụng các Framework
của Javascript như Express, NodeJS, NestJS, ReactJS, NextJS và cơ sơ sở liệu là
MongoDB. Thông qua ứng dụng còn giúp chúng em học thêm về các Framework để
ứng dụng vào thực tế sau này.
Giúp cho cửa hàng có thể nâng cao thương hiệu cá nhân hoặc doanh nghiệp cũng như
chất lượng sản phẩm dịch vụ đối với khách hàng. Đồng thời, giúp quản lý số lượng
hàng hóa hiện có hay đã hết trong kho, quản lý sản phẩm, danh mục sản phẩm, các
đơn hàng và đánh giá của khách hàng, quy trình bán nhanh gọn hiệu quả tiết kiệm thời
gian và chi phí.
1.3. CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

Các đối tượng ta cần nghiên cứu:

12
 ReactJS: hiểu rõ về HTML, CSS, JS để xây dựng giao diện của trang web, tìm hiểu
về cách hoạt động của ReactJS, cách mà thư viện tích hợp vào ứng dụng.
 NodeJS: sử dụng kết hợp với express để nâng cao tính hiểu quả, do express cung
cấp những tính năng giúp chúng ta xây dựng server một cách dể dàng hơn. Ngoài
ra nhóm còn nghiên cứu về NestJS là một framework được xậy dựng sẵn từ
NodeJS và Express.
 MongoDB: tìm hiểu về cách lưu trữ dữ liệu trong MongoDB và các datatype của
nó, cách kết nối với ứng dụng server.
 Nghiên cứu cách tổ chức chương trình trên các trang web lớn, các công nghệ thư
viện để tích hợp vào của họ, để hiểu hơn về cách lập một ứng dụng hoàn chỉnh.
1.4. KẾT QUẢ DỰ KIẾN
 Tạo một ứng dụng web cho phép người bán đăng tải các sản phẩm của họ lên trang
chủ.
 Cho phép khách hàng lựa chọn nhiều loại sản phẩm trên nhiều danh mục, chọn
thanh toán qua Momo và trực tiếp.
 Khách hàng được phép bình luận về sản phẩm khi mua hàng.
 Thống kê doanh thu bán được.
1.5. NHỮNG NỘI CHỨC NĂNG ĐÃ HOÀN THÀNH TRONG TIỂU LUẬN
 Đăng nhập đăng ký
 Quản lý thêm xóa sửa danh mục sản phẩm
 Quản lý thêm xóa sửa sản phẩm xem thông tin sản phẩm
 Lấy danh sách sản phẩm mới
 Lọc sản phẩm theo giá
 Tìm kiếm sản phẩm
 Hiển thị chi tiết sản phẩm
 Bình luận sản phẩm đã mua, xóa bình luận
 Mua hàng bằng cách thanh toán trực tiếp
 Quản lý đơn hàng, duyệt đơn hàng, hủy đơn hàng
 Quản lý tài khoản, xóa tài khoản
1.6. CÁC CHỨC NĂNG ĐÃ HOÀN THIỆN THÊM TRONG KHÓA LUẬN

13
 Đối với đồ án khóa luận đã có nhiều cải tiến về cách hoạt động. Thay vì admin tạo
sản phẩm rồi bán theo cách bình thường, thì ta thêm trang Seller là trang dùng cho
những nhà bán hàng đăng ký bán không phải là admin seller bao gồm các chức năng:

 Tạo mã giảm giá, hủy mã giảm giá

 Thống kê doanh thu thống kê số lượng sản phẩm của một seller
 Tạo sản phẩm và yêu cầu admin duyệt, ẩn sản phẩm, lọc sản phẩm
 Quản lý đơn hàng, thêm trạng thái đơn hàng, duyệt đơn hàng
 Thông báo cho khi có người mua hàng, hủy sản phẩm, thông báo khi admin duyệt
sản phẩm
 Quản lý thông tin của một seller, các thông tin liên hệ
 Thêm chức năng quên mật khẩu xác nhận qua mail
 Quản lý thông tin đánh giá và trả lời đánh giá

Đối với admin bao gồm:

 Admin sẽ tạo danh mục giống như lúc trước nhưng thêm chức năng search
 Admin sẽ duyệt sản phẩm của seller mới được đưa ra bán, quản lý thông tin sản
phẩm
 Thống kê doanh thu cho admin
 Quản lý đơn hàng của các seller
 Admin được xem chi tiết hóa đơn
 Thông báo khi có đơn hàng hay sản phẩm mới từ seller
 Ngoài ra admin sẽ được phê duyệt đánh giá

Đối với giao diện client:

 Thêm lọc sản phẩm theo giá tăng hoặc giảm, lọc theo số sao
 Thêm thông báo đến người dùng khi đơn hàng được duyệt, đang vận chuyển
 Thêm dropdown chọn địa chỉ giao hàng
 Thêm chọn phương thức thanh toán momo

14
 PHẦN 2: NỘI DUNG
CHƯƠNG 1: CÔNG NGHỆ MERN STACK

I. Ý NGHĨA VỀ MERN

Với sự phổ biến rộng rãi của Javascript cũng như thống kê hiện nay, các dịch vụ phát
triển ứng dụng web và di động ngày càng phổ biến và bước lên một tầm cao thì Mern
Stack đang có lợi thế rất lớn và được ưu tiên lựa chọn để thiết kế Website.

MERN STACK là công nghệ dùng để xây dựng các ứng dụng web nâng cao. Ngăn
xếp MERN bao gồm các thành phần nguồn mở khác nhau bao gồm:

● M= MongoDB: Cơ sở dữ liệu NoSQL phổ biến.

● E= Express: Web Framework nhẹ và di động.
● R= React: Thư viện Javascript để xây dựng giao diện người dung.
● N= Node.js: Môi trường thực thi Server – side Javascript.

Các thành phần này cung cấp hỗ trợ để các nhà phát triển làm việc và là bộ Combo
Open Source các công nghệ đều liên quan tới JavaScript.

STACK: một chương trình hoàn thiện không chỉ có code, mà còn phải có nền tảng hệ
điều hành và những phần mềm đi kèm (web server, cơ sở dữ liệu). Người ta gom
những thứ này lại với nhau tạo thành technical stack.

II. LỊCH SỬ PHÁT TRIỂN

1. Lịch sử phát triển Reactjs

Reactjs được ra đời vào năm 2013 bước đầu nó chỉ là các trang html tĩnh sau đó css và
js ra đời giúp người dùng tương tác và tạo ra trang web đẹp hơn nhưng chỉ là gửi và
nhận file nhưng JQuery ra đời giúp phát triển trang chỉ cần load trang web 1 lần như
cập nhật data [8].
Năm 2010 Angular được tạo bởi google ra đời đã tạo ra chuẩn mực xây dựng web sau
này nhưng sẽ có rất nhiều tính năng được sinh ra tại nhiều chỗ khác nhau trên trang
web như tin nhắn, các quảng cáo, bài post….ví dụ như facebook mà AngularJS khó
giải quyết vì lượng code quá nhiều nên năm 2013 các kỹ sư ở Facebook đã ra đời khái
niệm React khi nó giới thiệu và phát triển đến ngày nay và được nhiều công ty lớn trên
thế giới dùng [8].

15
2. Lịch sử phát triển NodeJS

Node.js được Ryan Dahl viết ban đầu vào năm 2009 nhưng còn nhiều khả năng hạn
chế của máy chủ web nên 8 tháng 11 năm 2009 Node.js kết hợp công cụ
JavaScript V8 của Google [10].
Vào tháng 1 năm 2010, một trình quản lý gói đã được giới thiệu cho Node.js được gọi
là npm giúp lập trình viên dễ dàng xuất bản và chia sẻ mã nguồn của các gói Node.js
và được thiết kế để đơn giản hóa việc cài đặt, cập nhật và gỡ cài đặt các gói.
Vào tháng 6 năm 2011, Microsoft và Joyent đã triển khai phiên bản Windows gốc của
Node.js [10].
Vào tháng 12 năm 2014, Fedor Industry bắt đầu io.js, một nhánh của Node.js. Do mâu
thuẫn nội bộ về quản trị của Joyent, io.js được tạo ra như một giải pháp thay thế quản
trị mở với một ủy ban kỹ thuật riêng biệt.
Vào tháng 2 năm 2015, ý định thành lập quỹ Node.js trung lập đã được công bố.  Đến
tháng 6 năm 2015, cộng đồng Node.js và io.js đã bỏ phiếu để làm việc cùng nhau dưới
Node.js Foundation
Vào năm 2019, JS Foundation và Node.js Foundation đã hợp nhất để tạo
thành OpenJS Foundation [10].

3. Lịch sử phát triển MongoDB

MongoDB được phát triển bởi công ty phần mềm 10gen vào năm 2007 đến năm 2009
công ty chuyển sang mô hình phát triển mã nguồn mở công ty cung cấp hỗ trợ thương
mại và các dịch vụ khác. Năm 2013 10gen đổi tên thành MongoDB Inc.
Vào ngày 20 tháng 10 năm 2017, MongoDB trở thành công ty giao dịch công khai và
được yết trên NASDAQ với tên gọi MDB
Vào ngày 30 tháng 10 năm 2019, MongoDB đã hợp tác với Alibaba cung cấp cho
khách hàng của mình giải pháp MongoDB-as-a-service. Khách hàng có thể sử dụng
dịch vụ được quản lý từ các trung tâm dữ liệu toàn cầu của BABA [11].

CHƯƠNG 2: CÀI ĐẶT VÀ TRIỂN KHAI

I. CÁCH CÀI ĐẶT VỚI NODE.JS

Bước 1: Download NodeJS từ trang chủ Nodejs.org

16
Bạn truy cập vào địa chỉ https://nodejs.org/en/download/ sẽ xuất hiện một trang web
với giao diện như sau:

Hình 1. Trang chủ cài đặt Node

Bước 2: Sau khi chọn phiên bản phù hợp với máy tính thì ta chỉ cần chạy file vừa tải
và cài đặt rất đơn giản.
Bước 3 Để chạy được NodeJS ta cần có một trình soạn thảo code. Ở đây công cụ mà
nhóm sử dụng là Visual Studio Code https://code.visualstudio.com một tool khá nổi
tiếng. Để đơn giản ta tạo một thư mục rồi mở nó lên ở Visual Studio Code rồi mở
terminal gõ npm init để tạo một project NodeJS như hình.

17
 Hình 2. Màn hình terminal tạo mới project nodejs

II. CÀI ĐẶT VỚI EXPRESS

Là một Framework chạy trên nền tảng của NodeJS nên ta sẽ cài nó trong project của
NodeJS bằng cách gõ lệnh “npm install express” ngay trong project NodeJS.

Hình 3.Màn hình terminal cài đặt framework express

18
III. CÀI ĐẶT VỚI REACT

Ta có thể dùng cmd hoặc PowerShell để cài reactjs ở global với lệnh “npm install –g
create-react-app”

Hình 4.Màn hình cài ReactJS sử dụng ở global

IV. CÀI ĐẶT VÀ KẾT NỐI CƠ SỞ DỮ LIỆU VỚI MONGODB

❖ Tải và cài đặt

Bước 1: Truy cập trang https://www.mongodb.com/download center#community

và tải.
Bước 2: Bắt đầu cài đặt.

19
 Hình 5. Giao diện cài đặt MongoDB

Tiếp tục nhấn Next sau đó chọn Custom và tiếp tục Next rồi chọn mục lưu file tải. Sau
đó lựa chọn để cài đặt Mongo Compass đây là một công cụ trực quan giúp làm việc
với MongoDB.

❖ Tạo mới connection và kết nối với database

Hình 6. Giao diện của MongoDB Compass

20
MongoDB được chạy với cổng 27017 ở local, dùng chuỗi kết nối trên để kết nối tới
server bên Nodejs. Chọn connect để tiếp tục, dấu cộng bên dưới để tạo một db mới,
như nhóm đã làm database có tên ecommerce-tlcn, có thể chọn create collection để tạo
mới một collection.

Hình 7.Giao diện các collection trong MongoDB Compass

Đối với nodejs chúng ta không cần tạo trước collection mà có thể để nó tự tạo kết khi
kết nối Nodejs. Để kết nối giữa server và database mongoDB ta dùng thư viện
mongoose. Để cài đặt mongoose ta làm đơn giản, mở cmd gõ lệnh : npm install
mongoose –save hoặc yarn add mongoose nếu dùng yarn.

Hình 8. Cài đặt gói package

Sau đó tiến hành import vào project để tạo kết nối, với chuỗi kết ban đầu bên
mongoDB là: "mongodb://localhost:27017/ecommerce-tlcn"

21
 Hình SEQ Hình
Hình 9.
\* Kết
ARABIC 9. MongoDB
nối với Kết nối MongoDB
ở local trên local
Ta tiến hành tạo các Shema để khai báo thuộc tính, và dùng Schema để tạo Model ứng
với các bản trong database.

Hình 10. Tạo mới collection

Ví dụ như phần cart có các trường như user cho biết cart đó thuộc user nào, cartItems
là mảng các item có trong cart, trong item lại có mã sản phẩm tương ứng, số lượng và
giá của sản phẩm, từ shema trên dùng tạo thành một model.
Khi người bắt đầu mua từ bên client gửi một request đến server, lúc này mongoose sẽ
tạo ra cho chúng ta một collection với những trường tương ứng mà ta đã tạo bên
server, _id được tạo tự động để phân biệt với các đối tượng khác, dữ liệu bên
mongoDB lưu với dạng json, bao gồm key value.

22
Hình 11.Data được lưu vào MongoDB

23
 HƯƠNG 3: TÌM HIỂU CÁC TRANG WEB BÁN ĐỒ NỘI THẤT

I. TRANG WEB BÁN ĐỒ NỘI THẤT NHADEP.COM.VN

1.Giới thiệu trang web

Web nội thất Nhà Đẹp là một trong những thương hiệu đi đầu trong lĩnh vực nội
thất tại Việt Nam hiện nay có tuổi đời lâu. Được hoạt động vào năm 1999 có quy mô 3
nhà máy sản xuất. Có hệ thống cửa hàng tại Hà Nội và TP. Hồ Chí Minh đến nay đã
được phát triển rộng khắp cả nước với quy mô càng phát triển sẵn sàng cung cấp cho
thị trường những sản phẩm nội thất, đồ dùng gia đình tới các nhu cầu từng cá nhân
người dùng từ giá thành cao tới giá thành thấp nhưng chất lượng luôn đi kèm với sản
phẩm. Được thiết kế chủ đạo trên phông nền màu trắng. Sản phẩm được đăng bán trên
Web được mô tả rất chi tiết cụ thể, giúp người mua nắm rõ những thông tin sản phẩm
trước khi quyết định mua hàng.
Ban đầu chỉ là một trang giới thiệu doanh nghiệp nhưng đến năm 2007
Nhadep.com.vn được phát triển hơn về giao diện các chức năng hơn trở thành một
trang web mua bán online mua bán nội thất lớn tại việt nam. Nhadep.com.vn dần hoàn
thiện hơn về giao diện.

Hình 12. Ảnh trang chủ nhà đẹp

24
2.Các đặc điểm của trang web

Tối ưu hóa khi dùng di động lên trang web, cho khách hàng thấy được lợi ích của sản
phẩm trên web đăng bán cũng như tạo cảm giác tin tưởng cho khách hàng khi xem
sản phẩm.

Giao diện trang web: Chủ đạo trên nền phông trắng, mô tả chi tiết giá thành từng sản
phẩm đầy đủ thông tin cửa hàng chi nhánh các thương hiệu thuộc TCT GROUP
khuyến mãi cũng như thông tin cần liên hệ khi khách hàng cần.

Bố cục trang web: Dễ nhìn cho người dung, logo thương hiệu rõ ràng trong website

Nội dung hấp dẫn: Thường xuyên cập nhập nội dung sản phẩm cũng như thông tin
khuyến mãi tới khách hàng và giới thiệu sản phẩm logic thu hút khách hàng.

3.Ưu nhược điểm của trang web

Ưu điểm Nhược điểm

+ Giúp giảm bớt chi phí kinh doanh + Bảo mật trên internet chưa thực sự
vận hành thấp. an toàn.
+ Giúp việc giao dịch nhanh cũng như
+ Sự thiếu tin tưởng của khách hàng
linh hoạt về thời gian, không gian.
về chất lượng sản phẩm.
+ Độ uy tín cao hơn, quan tâm đến
+ Người bán không hiểu về hệ thống
nhu cầu khách hàng.
thanh toán trực tuyến.
+ Tiết kiệm thời gian cho người mua
+ Việc tư vấn thắc mắc cho khách
hàng
hàng chậm.
+ Giao diện mới tổng quan đầy đủ
cho người dùng dễ nắm bắt dễ hiểu
được thông tin sản phẩm cần mua, số
lượng mua sản phẩm ngày càng tăng,
chất lượng đánh giá khá cao.

25
II. TRANG WEB NHAXINH.COM

1.Giới thiệu trang web

Website nhaxinh.com được thành lập đầu tiên vào năm 2007 tiên phong phát triển nội
thất trên Internet. Tạo nên thương hiệu có uy tín đạt nhiều thành tích trong ngành nội
thất trong nước và là một trong những thương hiệu lâu đời từ 2 cửa hàng ở Tp. Hồ Chí
Minh và Tđ. Hà Nội những năm 2008.

Hình 13. Ảnh trang chủ nhà xinh

2.Các đặc điểm của trang web

Giao diện trang web: Chủ đạo trên nền phông trắng, mô tả chi tiết giá thành từng sản
phẩm đầy đủ thông tin cửa hàng chi nhánh các thương hiệu phần lớn sản phẩm của
Nhà Xinh được sản xuất tại nhà máy của Tổng công ty AA (AA Đức Hòa, Long An và
AA Tây Ninh) có diện tích 80.000m2, với trang thiết bị hiện đại nhất và theo tiêu
chuẩn ISO 9001, chuyên sản xuất các sản phẩm nội thất chất lượng cao cho các khách
sạn, nhà hàng 5 sao, dự án nội thất cao cấp và xuất khẩu.
Bố cục trang web: Dễ nhìn cho người dùng, logo thương hiệu rõ ràng trong website.
Nội dung hấp dẫn: Thường xuyên cập nhập nội dung sản phẩm cũng như thông tin
khuyến mãi tới khách hàng và giới thiệu sản phẩm logic thu hút khách hàng.

26
3.Ưu nhược điểm của trang web

Ưu điểm Nhược điểm

+ Giúp giảm bớt chi phí kinh doanh + Sự thiếu tin tưởng của khách hàng
vận hành thấp. về chất lượng sản phẩm

+ Giúp việc giao dịch nhanh cũng + Việc tư vấn thắc mắc cho khách
như Linh hoạt về thời gian, không hàng chậm.
gian
+ Thông tin liên hệ online khách hàng
+ Tiết kiệm thời gian cho người còn ít không đủ phục vụ khách hàng.
mua hàng
+ Không cho khách hàng đánh giá
+ Giao diện mới tổng quan đầy đủ sản phẩm khi đã mua hàng.
cho người dùng dễ nắm bắt dễ hiểu
+ Hiển thị thông tin sản phẩm khuyến
được thông tin sản phẩm cần mua,
mãi quá nhỏ khó cho khách hàng nhìn
số lượng mua sản phẩm ngày càng
thấy.
tăng.
+ Khách hàng không lưu được hình
+ Tốc độ truy cập vào web nhanh
ảnh sản phẩm về máy.
+ Chất lượng hình ảnh sản phẩm tốt
đa dạng về mẫu mã sản phẩm.

III. TRANG WEB HOMEOFFICE.COM.VN

1.Giới thiệu trang web

Homeooffice.com.vn là website bán đồ nội thất trực tuyến thuộc sở hữu của công
ty TNHH TMDV Home Office được đưa vào hoạt động vào tháng 3 năm 2015. Nội
thất của Home Office kinh doanh sản xuất rất đa dạng phục vụ cho nội thất trong gia

27
đình, căn hộ chung cư như bàn làm việc , ghế ngồi, kệ sách…Bên cạnh đó còn phục vụ
cho văn phòng công ty.

Ngoài ra chúng ta cũng có thể tìm thấy sản phẩm độc đáo tại đây mới lạ theo xu
hướng của thế giới như nội thất bằng ống nước hay bằng gỗ ép với tiêu chí bảo vệ môi
trường. Đa số sản phẩm của Home Office được công ty lên mẫu thiết kế và tự sản xuất
với tiêu chí đem lại cho khách hàng có trải nghiệm tiện nghi thoải mái ngay chính ngôi
nhà của mình.

Hình 14.Ảnh trang chủ Home Office

2.Đặc điểm trang web

Tối ưu hóa khi dùng di động lên trang web, cho khách hàng thấy được lợi ích của sản
phẩm trên web đăng bán cũng như tạo cảm giác tin tưởng cho khách hàng khi xem sản
phẩm.

Giao diện trang web: Chủ đạo trên nền phông trắng chữ đen, mô tả chi tiết giá thành
từng sản phẩm đầy đủ thông tin cửa hàng chi nhánh các thương hiệu công ty TNHH
TMDV Home Office

Bố cục trang web: Dễ nhìn cho người dùng, logo thương hiệu rõ ràng trong website.

3.Ưu nhược điểm trang web

28
 Ưu điểm Nhược điểm
+ Giúp giảm bớt chi phí kinh doanh + Việc tư vấn thắc mắc cho khách
vận hành thấp.[3] hàng chậm.

+ Giúp việc giao dịch nhanh cũng như + Chi tiết mô tả sản phẩm chưa đầy
Linh hoạt về thời gian, không gian đủ gây thu hút.

+ Dịch vụ khách hàng chi tiết hướng + Trang web quá nhiều mục chi tiết
dẫn đầy đủ các bước đặt hàng cho gây khó chịu cho khách hàng
khách hàng gặp khó khăn.
+ Thông tin sản phẩm khuyến mãi
+ Cho phép khách hàng đánh giá sản không hiện lên khi người dùng vào
phẩm trang

+ Tốc độ truy cập vào web nhanh

+ Chất lượng hình ảnh sản phẩm tốt đa

dạng về mẫu mã sản phẩm.

+ Giá thành sản phẩm rẻ

+ Có cả hàng thanh lý cho những

khách hàng có kinh phí thấp

IV. TRANG WEB GO HOME

1.Giới thiệu trang web

Nội thất Go Home là thương hiệu thuộc sở hữu công ty Sunvina Việt Nam được
thành lập vào năm 2015 hoạt động trong lĩnh vực kinh doanh và phân phối các sản nội
thất bằng gỗ tạo cảm giác cho khách hàng những trải nghiệm sang trọng, cùng với các
sản phẩm được thiết kế rất tinh tế cầu kì. Trang web của nội thất Go Home có tên miền
là gotrangtri.vn

29
 Hình 15.Ảnh trang chủ gỗ trang trí

2.Đặc điểm trang web

Tối ưu hóa khi dùng di động lên trang web, cho khách hàng thấy được lợi ích của sản
phẩm trên web đăng bán cũng như tạo cảm giác tin tưởng cho khách hàng khi xem
sản phẩm.

Giao diện trang web: Được thiết kế trên nền phông trắng và lấy màu chủ đạo màu
xanh có tác dụng dịu mắt, mô tả chi tiết giá thành từng sản phẩm đầy đủ thông tin cửa
hàng chi nhánh các thương hiệu công ty TNHH TMDV Home Office

Bố cục trang web: Bố cục tổng thể trang web rất đồng đều, rõ ràng và dễ tìm kiếm
giúp bạn nhanh chóng định hình được sản phẩm mình cần mua nằm ở đâu,.. logo
thương hiệu rõ ràng trong website.

3.Ưu nhược điểm trang web

Ưu điểm Nhược điểm

+ Giúp giảm bớt chi phí kinh + Nội dung các đề mục được ẩn
doanh vận hành thấp. đi nên việc tìm kiếm sẽ mất nhiều
+ Giúp việc giao dịch nhanh cũng thời gian của khách hàng.
như linh hoạt về thời gian, không
+ Không có mục đăng ký khách
gian
hàng cũng như mục đăng nhập.

30
 + Cho phép khách hàng đánh giá
sản phẩm, cũng như lượt thích
khách hàng với sản phẩm dó.

+ Tốc độ truy cập vào web nhanh

+ Chất lượng hình ảnh sản phẩm

tốt đa dạng về mẫu mã sản phẩm.

+ Các sản phẩm có hàng xuất khẩu

và nhập khẩu

+ Có chính sách giao hàng miễn

phí theo khu vực

V. TRANG WEB NOITHATHOAPHAT.PRO

1. Giới thiệu trang web

Qua gần 25 năm thành lập và phát triển Nội thất Hòa Phát ngày càng lớn mạnh
và khẳng định được vị thế của nhà sản xuất nội thất hàng đầu tại Việt Nam, cùng với
sự nỗ lực không ngừng sáng tạo phát triển các dòng sản phẩm nhằm đáp ứng với nhu
cầu ngày càng cao của khách hàng hiện nay và hạn chế việc nhập khẩu các mặt hàng
nội thất văn phòng. Nội thất Hòa Phát là nhà sản xuất tiên phong trong việc nghiên
cứu và sản xuất trong nước.

Hình 16.Ảnh trang chủ HoaPhat

31
2.Đặc điểm trang web

Tối ưu hóa khi dùng di động lên trang web, cho khách hàng thấy được lợi ích của sản
phẩm trên web đăng bán cũng như tạo cảm giác tin tưởng cho khách hàng khi xem
sản phẩm.

Giao diện trang web: Được thiết kế trên nền phông trắng và giao diện khá đẹp mắt, mô
tả chi tiết giá thành từng sản phẩm từ chi tiết kiểu dáng, chất liệu, kích thước và màu
sắc.

Bố cục trang web: Bố cục tổng thể trang web dễ sử dụng, logo thương hiệu rõ ràng
trong website.
3.Ưu nhược điểm trang web

Ưu điểm Nhược điểm

+ Giúp giảm bớt chi phí kinh + Nội dung các đề mục được ẩn đi
doanh vận hành thấp. nên việc tìm kiếm sẽ mất nhiều thời
+ Giúp việc giao dịch nhanh cũng gian của khách hàng.
như linh hoạt về thời gian, không
+ Không có mục đăng ký khách hàng
gian
cũng như mục đăng nhập.
+ Cho phép khách hàng đánh giá
sản phẩm. + Các chương trình khuyến mãi bị ẩn

+ Tốc độ truy cập vào web nhanh
+ Chất lượng hình ảnh sản phẩm
tốt đa dạng về mẫu mã sản phẩm.
việc tìm kiếm sản phẩm khuyến mãi
gặp khó khăn.
+ Không có thông tin giới thiệu web
cũng như thương hiệu tạo cảm giác
chưa đủ tin tưởng cho khách hàng.

32
 CHƯƠNG 4: PHÂN TÍCH WEBSITE BÁN ĐỒ NỘI THẤT

I. MÔ TẢ WEBSITE

1. Lý do chọn đề tài

Hiện nay chúng ta có thể thấy tất cả các mặt hàng đều được đưa lên các trang
thương mại điện tử, các trang mạng xã hội, đối với trang thiết bị nội thất cũng không
ngoại lệ, chúng ta tạo ra một trang chỉ chuyên bán đồ thất sẽ giúp cho người có nhu
cầu dễ dàng lựa chọn sản phẩm mình cần hơn, giúp họ có cái nhìn tổng quát về sản
phẩm, nhất là về giá cả khi tiến hành mua hàng.

Từ nhu cầu đó nhóm chúng em đã nghiên cứu thiết kế đề tài “Xây dựng website
bán đồ nội thất” để hi vọng rằng có thể phần nào giúp cho mỗi cửa hàng bán hàng
nhanh hơn, kiểm soát được hàng hóa nhập xuất trong ngày cũng như việc cập nhật
doanh thu, chi phí để có được những điều chỉnh cần thiết, hợp lý nhất cho mỗi mặt
hàng, mỗi thời điểm.

2.Các chức năng có thể xây dựng

❖ Admin:
✔ Đăng nhập, đăng ký, quên mật khẩu
❖ Seller:
✔ Đăng nhập, đăng ký, quên mật khẩu
✔ Đăng ký thông tin seller
✔ Đăng ký bán sản phẩm, quản lý sản phẩm
✔ Quản lý thông tin order
✔ Quản lý thông tin giảm giá
❖ Client:
✔ Đăng nhập, đăng ký quên mật khẩu
✔ Tìm kiếm sản phẩm theo tên sản phẩm
✔ Xem sản phẩm
✔ Chọn sản phẩm theo danh mục
✔ Đánh giá sản phẩm khi đã mua hàng
✔ List các sản phẩm đã xem
✔ Thêm sản phẩm vào giỏ hàng
33
 ✔ Chọn các phương thức thanh toán
✔ Thanh toán Momo
✔ Chat với nhà cung cấp
II. CÁC THÀNH PHẦN CẦN CÓ ĐỂ WEBSITE CÓ THỂ HOẠT ĐỘNG ỔN
ĐỊNH

1.Tên miền

Tên miền còn được gọi là domain là một đường dẫn tới trang web của bạn hay còn
được nói cách khác là địa chỉ website.

Là duy nhất và được cấp phát khi hoàn tất đăng ký. Khi đăng ký tên miền sẽ phải trả
phí và chi phí duy trì sử dụng theo năm.

Tên miền quốc gia thường được đánh giá cao hơn các tên miền quốc tế, trừ trường hợp
doanh nghiệp của bạn hoạt động trên phạm vi toàn cầu. Tuy nhiên, nếu có điều kiện
bạn nên bảo vệ thương hiệu bằng việc mua hết các tên miền có đuôi phổ biến theo thứ
tự ưu tiên sau: tencongty .vn / .com.vn / .com / .net / .info / …

2.Thiết kế Website

Khi giới thiệu về doanh nghiệp của mình với đối tác, việc sở hữu website thể hiện sự
chuyên nghiệp, năng động. Doanh nghiệp sẽ được đánh giá cao, tạo sự tin tưởng đặc
biệt với đối tác. Nếu như văn phòng công ty khang trang chứng tỏ doanh nghiệp chất
lượng thì vai trò website cực kì quan trọng càng chỉnh chu, bắt mắt chứng tỏ doanh
nghiệp chuyên nghiệp.

Website được coi là bộ mặt của doanh nghiệp nếu doanh nghiệp nào có website
chuyên nghiệp hơn sẽ tạo được ấn tượng tốt hơn, thu hút khách hàng hơn và có nhiều
cơ hội bán hàng hơn.

❖ Các lưu ý thiết kế website:

34
 ✔ Các yếu tố về giao diện: Giao diện bắt mắt, tông màu phù hợp tạo ấn tượng cho
người xem

✔ Website phù hợp với xu hướng thiết kế hiện tại và thói quen người dùng chúng
ta hướng tới

✔ Phân bố nội dung, bố cục, màu sắc, đường nét hợp lý

✔ Yếu tố nhận diện thương hiệu trên web: logo, tên miền, slogan, font chữ

✔ Cung cấp đầy đủ thông tin cho khách hàng.

3.Hosting

Hosting còn được gọi là web hosting đây là không gian lưu trữ được chia nhỏ trên máy
chủ, máy chủ này cung cấp dịch Web và luôn kết nối internet để trang web hoạt động,
duy trì và cho phép mọi người truy cập website.

4.Mô tả giao diện các webpage

Website gồm: trang khách hàng, trang nhà cung cấp (seller), trang admin

Trang khách hàng: bao gồm trang chủ có trang sản phẩm trang giỏ hàng trang mua
hàng, trang thông tin mua hàng.

Trang seller: dành cho nhà cung cấp muốn bán hàng tại cửa hàng gồm trang phiếu
giảm giá, trang thông tin của nhà cung cấp, trang sản phẩm đăng bán, trang đơn hàng,
trang thống kê.

Trang admin: trang quản lý tài khoản, quản lý danh sách seller, trang quản lý danh
mục hiện có trên trang web, trang quản lý lợi nhuận thu được từ seller.

35
III. USE CASE HỆ THỐNG

1. Use case admin

Hình 17. Ảnh usecase admin

36
2. Use case seller

Hình 18. Ảnh usecase seller

37
3. Use case client

Hình 19. Ảnh usecase client

38
IV. Mô Tả Use Case

1. Use case đăng nhập

Tên use case: Xác thực Số ID: 01 Mức quan trọng: Cao

Actor chính: Admin, seller, client Loại use case: Thiết yếu, cần thiết.
Mô tả tóm tắt: Admin phải đăng nhập để tạo đơn hàng, duyệt sản phẩm, seller
đăng nhập vào hệ thống để đăng ký bán hàng. Đối với khách hàng phải đăng nhập
khi mua hàng để hệ thống lưu thông tin
Quy trình xử lý:

● Nhập thông tin đăng nhập

● Hệ thống kiểm tra
● Trả về kết quả
● Nếu thành công sẽ chuyển trang thất bại sẽ thống báo cho người dùng
Các xử lý ngoại lệ:

● Nếu đăng nhập thất bại hệ thống yêu cầu actor cung cấp lại thông tin đăng
nhập gồm tên đăng nhập và mật khẩu.

2. Use case thêm danh mục

Tên use case: Số ID: 02 Mức quan trọng: Cao

Thêm danh mục cho ứng

dụng
Actor chính: Admin Loại use case: Thiết yếu, cần thiết.
Mô tả tóm tắt: Admin tạo danh mục danh, seller chỉ được đăng bán những sản
phẩm thuộc danh mục này
Quy trình xử lý:

● Nhập tên danh mục, thêm danh mục con nếu cần
● Submit danh mục lên hệ thống

39
 ● Hệ thống lưu lại danh mục
● Trả về danh sách danh mục cho người dùng

Các xử lý ngoại lệ:

● Danh mục có ký tự đặc biệt sẽ được hệ thống báo lỗi

. Use case sửa danh mục

Tên use case: Số ID: 03 Mức quan trọng: Cao

Chỉnh sửa danh mục

Actor chính: Admin Loại use case: Thiết yếu, cần thiết.
Mô tả tóm tắt: Admin được quyền chỉnh sửa danh mục
Quy trình xử lý:

● Chọn danh mục cần chỉnh sửa

● Sửa lại danh mục
● Submit danh mục lên hệ thống
● Hệ thống lưu lại danh mục
● Trả về danh sách danh mục cho người dùng

Các xử lý ngoại lệ:

● Danh mục có ký tự đặc biệt sẽ được hệ thống báo lỗi

4. Use case quản lý danh mục

Tên use case: Quản lý Số ID: 04 Mức quan trọng: Cao

danh mục

Actor chính: Admin Loại use case: Thiết yếu, cần thiết.

40
 Mô tả tóm tắt: Sau khi đăng nhập thành công vào hệ thống để quản lý danh mục
sản phẩm, những danh mục admin thêm vào thì danh mục sản phẩm đó seller mới
được phép đăng bán
Quy trình xử lý:

● Hệ thống yêu cầu các thông tin để đăng nhập bao gồm tên đăng nhập và mật
khẩu đăng nhập.
● Sau khi đã có tài khoản và Actor nhập đầy đủ thông tin click vào nút “Đăng
nhập”.
● Hệ thống sẽ kiểm tra thông tin đăng nhập và thông báo thành công hoặc thất
bại cho actor.
Các xử lý ngoại lệ:

● Nếu đăng nhập thất bại hệ thống yêu cầu actor cung cấp lại thông tin đăng
nhập gồm tên đăng nhập và mật khẩu.

5. Use case duyệt sản phẩm

Tên use case: Số ID: 05 Mức quan trọng: Cao

Xét duyệt sản phẩm

Actor chính: Admin Loại use case: Thiết yếu, cần thiết.
Mô tả tóm tắt: Sau khi seller tạo sản phẩm thì admin sẽ nhận được thống báo có
sản phẩm mới, admin xét duyệt sản phẩm mới được bán
Quy trình xử lý:

● Chọn sản phẩm cần xét duyệt

● Chọn xác nhận hoặc hủy

41
 ● Submit lên hệ thống
● Hệ thống thay đổi trạng thái sang đã duyệt hoặc đã hủy
● Trả về danh sách sản phẩm cho admin
● Thông báo với seller

Các xử lý ngoại lệ:

● Không có ngoại lệ

6. Use case xác nhận đánh giá

Tên use case: Số ID: 06 Mức quan trọng: trung

bình
Xác nhận đánh giá
Actor chính: Seller Loại use case: Thiết yếu, cần thiết.
Mô tả tóm tắt: Đánh giá của khách hàng sẽ được admin duyệt trước khi show
lên trang chủ
Quy trình xử lý:

● Đánh giá được thông báo tới admin

● Admin chọn xác nhận hoặc hủy

● Đánh giá được xác nhận sẽ hiển thị trên trang chủ
Các xử lý ngoại lệ:

● Đánh giá mang tính vi phạm sẽ không được duyệt

7. Use case thêm sản phẩm

Tên use case: Thêm Số ID: 07 Mức quan trọng: Cao

sản phẩm

Actor chính: Khách hàng Loại use case: Thiết yếu, cần thiết.
Mô tả tóm tắt: Seller tạo sản phẩm cho cửa hàng mình
42
 Quy trình xử lý:

● Seller tạo sản phẩm mới

● Hệ thống lưu lại sản phẩm với trạng thái chưa được duyệt

● Seller gửi yêu cầu tới admin

● Chờ admin duyệt

● Admin duyệt sản phẩm sẽ được show trên trang chủ

Các xử lý ngoại lệ:

 Sản phẩm sẽ không được duyệt nếu admin thấy không hợp lệ

8. Use case gửi đơn hàng

Tên use case: Client Số ID: 08 Mức quan trọng: Cao

Actor chính: Khách hàng Loại use case: Thiết yếu, cần thiết.
Mô tả tóm tắt: Khi khách mau hàng và yêu cầu thanh toán
Quy trình xử lý:

● Khách hàng chọn sản phẩm cần mua từ giỏ hàng

● Xác nhận thông tin giao hàng

● Xác nhận phương thức thanh toán

● Đơn hàng sẽ được hệ thống lưu lại và báo về cho seller

43
Các xử lý ngoại lệ:

● Nếu không đăng nhập thì không thể mua hàng

● Nếu không thông tin người nhận không hợp lệ thì không gửi được đơn
hàng

V. SƠ ĐỒ ACTIVITY

1.Đăng nhập

Hình 20. Sơ đồ biểu diễn đăng nhập

44
2.Giỏ hàng

Hình 21. Sơ đồ biễu diễn giỏ hàng

3. Tìm kiếm sản phẩm

Hình 22. Sơ đồ biểu diễn tìm kiếm sản phẩm

45
4.Đánh giá sản phẩm

Hình 23. Sơ đồ biểu diễn đánh giá sản phẩm

46
5. Thêm danh mục

Hình 24. Sơ đồ biểu diễn thêm danh mục sản phẩm

47
6. Cập nhật danh mục

Hình 25. Sơ đồ biểu diễn cập nhật danh mục

48
7. Đặt hàng

Hình 26. Sơ đồ biểu diện quá trình đặt hàng

49
VI. THIẾT KẾ CƠ SỞ DỮ LIỆU

1. Sơ đồ ERD

Hình 27. Erd của ứng dụng

2.Các collection

❖ Admin

export class Admin extends mongoose.Document {
  @Prop()
  @IsNotEmpty()
  name: string;

  @Prop({ enum: ROLE })
  role: ROLE;

  @Prop()
  @IsEmail()
  email: string;
  
  @Prop()
  @IsNotEmpty()
50
  password: string;

  verifyPassword: (password: string) => Promise<boolean>;
}

Collection admin bao gồm:

✔ name: tên của admin kiểu dữ liệu lả string

✔ role: phân quyền admin kiểu dữ liệu enum là các quyền lưu sẵn và khai báo
dưới dạng một enum object
✔ email: mail xác nhận thông tin cá nhân
✔ password: password được lưu dưới dạng string
❖ Brand (thương hiệu)

export class Brand extends mongoose.Document {
  @Prop({ unique: true })
  name: string;
}

Collection chỉ có name là tên của thương hiệu sản phẩm và nó duy nhất
“unique:true”.
❖ Category ( danh mục sản phẩm )

export class Category extends mongoose.Document {
  @Prop({ unique: true })
  name: string;

  @Prop({ type: mongoose.Schema.Types.Array, default: [] })
  properties: [];

  @Prop({
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Category',

51
    default: null,
  })
  parent?: Record<string, any>;
}

Collection bao gồm:

✔ name: ten danh mục lưu dưới dạng string

✔ properties: là các tùy chọn theo từng danh mục lưu dưới dạng array(ví dụ bàn
ghế thì có các tùy chọn là to hay nhỏ, thuộc vật liệu gì)
✔ parent: mỗi danh mục sẽ có danh mục cha của nó hoặc không (ví dụ danh mục
phòng khách lại có danh mục con là ghế sofa)
❖ Origin (nguồn gốc sản phẩm)

export class Origin extends mongoose.Document {
  @Prop({ unique: true })
  name: string;
}
Collection chỉ gồm tên của của nguồn gốc có thuộc tính unique

❖ Product (sản phẩm được seller đăng bán)

export class Product extends mongoose.Document {
  @Prop({ index: true })
  @ApiProperty()
  @IsNotEmpty()
  name: string;

  @Prop({ required: false })
  @ApiPropertyOptional()
  @IsOptional()
  video?: string;
  @Prop()
  @ApiProperty()
52
  @IsNotEmpty()
  description: string;

  @Prop()
  @ApiProperty()
  @IsNumber()
  price: number;

  @Prop()
  @ApiProperty()
  @IsNumber()
  market_price: number;

  @Prop({ type: mongoose.Schema.Types.Array, required: false })
  @ApiPropertyOptional()
  @IsOptional()
  images: [Image];

  @Prop({ type: mongoose.Schema.Types.Array, required: false })
  @ApiPropertyOptional()
  @IsOptional()
  properties: [];

  @Prop({ type: [{ type: mongoose.Schema.Types.ObjectId, ref: '
Category' }] })
  @ApiProperty({ type: () => [Category] })
  @IsNotEmpty({ each: true })
  @IsObjectId({ message: 'categories is invalid [ObjectId]', ea
ch: true })
  categories: Category[];

53
  @Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Origin' }
)
  @ApiProperty({ type: () => Origin })
  @IsNotEmpty()
  @IsObjectId({ message: 'Origin is invalid ObjectId' })
  origin: Origin;

  @Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Brand' })
  @ApiProperty({ type: () => Brand })
  @IsNotEmpty()
  @IsObjectId({ message: 'Brand is invalid ObjectId' })
  brand: Brand;

  @Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Seller' }
)
  seller: Seller | string;

  @Prop({ default: 1 })
  @ApiProperty()
  @IsNumber()
  amount: number;

  @Prop({ default: 0 })
  sold_amount: number;

  @Prop({ enum: PRODUCT_STATUS, default: PRODUCT_STATUS.PENDING 
})
  status: PRODUCT_STATUS;
}

54
Collection bao gồm:
✔ name: tên sản phẩm kiểu string
✔ video: video mô tả sản phẩm có thể có hoặc không được lưu dưới dạng đường
dẫn
✔ description: mô tả của sản phẩm kiểu string
✔ price: giá gốc sản phẩm kiểu number
✔ market_price: giá bán ra kiểu number
✔ images: hình ảnh lưu dưới dạng array các hình mà ở đó các hình được lưu dạng
đường dẫn ảnh
✔ properties: các thuộc tính của sản phẩm kiểu array tham chiếu đến collection
category
✔ categories: sản phẩm thuộc danh mục nào nó có thể thuộc nhiều danh mục
✔ origin: nguồn gốc của sản phẩm tham chiếu đến collection origin
✔ brand: thương hiệu nó tham chiếu đến collection brand
✔ amount: số lượng còn lại kiểu number
✔ sold_amout: số lượng bán ra
✔ status: trạng thái của sản phẩm
❖ Seller

export class Seller extends mongoose.Document {
  @Prop()
  owner_name: string;
  @Prop({ unique: true })
  email: string;
@Prop()
password: string;

@Prop({ enum: ['pending', 'verified'], default: 'pending' })
status: 'pending' | 'verified';

@Prop({ default: 'odf' })
pick_up_type: string;

55
@Prop()
password_reset_token: string;

@Prop({ type: mongoose.Schema.Types.Array })
contactInfos: [ContactInfo];

@Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Category' }
)
category: Category;

verifyPassword: (password: string) => Promise<boolean>;
}
❖
Collection bao gồm:
✔ ower_name: tên người bán
✔ email, password: tương tự như admin
✔ status: trạng thái đã được admin xác thực hoặc đang chờ sử lý khi đưa sản phẩm
lên
✔ contact_info: thông tin liên hệ của người bán
✔ category: danh mục sản phẩm mà seller bán
❖ Store

export class Store extends mongoose.Document {
  @Prop({ unique: true })
  @IsNotEmpty()
  @IsOptional()
  store_name: string;

  @Prop({ unique: true, required: false })
  url: string;

56
  @Prop()
  @IsNotEmpty()
  @IsOptional()
  representative_name: string;

  @Prop()
  @IsNotEmpty()
  @IsOptional()
  representative_email: string;

  @Prop({ type: [contactSchema], default: [] })
  contacts: [Contact];

  @Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Seller' }
)
  seller: string | Seller;
}

Collection bao gồm:

✔ store_name: tên của cửa hàng kiểu string
✔ regresentative_name: tên người đại diện kiểu string
✔ contacts: mảng lưu các thông tin liên hệ của cửa hàng
✔ seller: người bán hàng cho cửa hàng kiểu dữ liệu là string hoặc tham chiếu đến
collection seller.

3. Nhập dữ liệu cho cơ sở dữ liệu

❖ Dữ liệu người dùng: sẽ được tạo khi người dùng vào các trang như client, admin,
seller thực hiện đăng ký tài khoản, tạo hồ sơ cá nhân.
❖ Dữ liệu về danh mục sản phẩm: được quản lý tại trang admin, do admin thêm mới
vào
❖ Dữ liệu sản phẩm: sản phẩm của các cửa hàng sẽ được các các seller cung cấp khi
muốn bán sản phẩm và được qua kiểm duyệt của admin.
57
❖ Dữ liệu về thanh toán đơn, thông tin trao đổi của khách hàng: chúng ta sẽ nhận
được khi người dùng mua hàng, trao đổi đánh giá trên website.
❖ Dữ liệu thống kê: sẽ được thống kê ở trang seller dựa trên các đơn hàng và doanh
thu đạt được. Dữ liệu này ta không lưu vào database vì có thẻ tính được nhờ vào
các đơn hàng.
VII. MÔ TẢ CẤU TRÚC CHƯƠNG TRÌNH VÀ CÁC TRANG WEB

1. Mô tả cấu trúc chương trình

Hình 28. Mô tả cấu trúc chương trình

Chương trình gồm có 3 thành phần: Seller Portal (cho người dùng bán hàng), Shop
(giao diện bán hàng), Admin(cho admin) với các API và giao diện tương ứng. Mỗi
API dùng chung 1 cơ sở dữ liệu là MongoDB là nơi để truy vấn, lưu trữ dự liệu. Ngoài
ra API còn kết nối tới MailGun để thực hiện việc gửi email đến cho người dùng.

2. Thiết kế các trang web

❖ Trang chủ (giao diện người dùng là khách hàng):

❖ Trang admin: bao gồm trang đăng nhập đăng ký, quản lý danh mục, quản lý xét
duyệt sản phẩm.

58
 ✔ Đăng ký, đăng nhập: yêu cầu người dùng phải có tài khoản admin mới được
vào hệ thống đăng nhập sau khi đăng nhập hoặc đăng ký.
✔ Trang danh mục : là trang mà admin được phép thêm danh mục vào thực
hiện thao tác với nó
✔ Trang sản phẩm: admin được phép hủy sản phẩm hoặc duyệt sản phẩm cho
seller.
❖ Trang seller: mã giảm giá, sản phẩm, quản lý đơn hàng, quản lý profile seller
✔ Trang mã giảm giá: để cho seller tạo ra các phiếu discount cho sản phẩm
của mình.
✔ Trang sản phẩm: ở đây lại chia ra các trang con cho mục đích quản lý sản
phẩm, áp dụng giảm giá áp dụng, thông tin các nhà cung cấp sản phẩm.
✔ Trang quản lý profile: các thao tác liên quan đến quản lý thông tin seller
thông tin cửa hàng.
✔ Trang quản lý đơn hàng: giúp seller nắm bắt được các đơn hàng và quản lý
giao hàng một cách tốt nhất.
❖ Trang client: là trang giao diện cho khách hàng của website chia ra rất nhiều trang
tiện ích khác nhau.
✔ Trang chủ: chứa thông tin shop dưới header, các tiêu đề, thông tin quản cáo,
một số sản phẩm được trưng bày cho người dùng, hiển thị giỏ hàng, danh
sách các danh mục sản phẩm.
✔ Trang sản phẩm liệt kê các sản phẩm các nút tìm kiếm lọc sản phẩm, một số
thông tin sản phẩm.
✔ Trang chi tiết sản phẩm: thông tin cụ thể của sản phẩm kèm mô tả, các sản
phẩm liên quan và các thông tin đánh giá từ khách hàng.
✔ Trang tìm kiếm: giống trang sản phẩm nhưng sẽ liệt kê số ít sản phẩm được
người dùng yêu cầu.
✔ Trang giỏ hàng: thông tin các sản phẩm trong giỏ hàng, về giá về số lượng.
✔ Trang đơn hàng: gồm 2 trang một trang để xác nhập thông tin người mua,
một trang để xác nhận thanh toán và gửi đơn hàng.
✔ Trang những sản phẩm đã mua: sau khi nhận được hàng thì khách hàng sẽ
có trang lịch sử sản phẩm đã mua và họ được đánh giá về sản phẩm.
✔ Ngoải ra có một số trang khác: thông tin người dùng,...
59
60
 PHẦN 3: KẾT LUẬN
CHƯƠNG 1: KẾT QUẢ ĐẠT ĐƯỢC

I. CÔNG NGHỆ

 MongoDB: tìm hiểu thành công về NoSql, tốc độ truy vấn nhanh dễ dàng giao
tiếp với server có sẵn các phương thức để truy vấn data.
 NodeJS: Xây dựng thành công các API của một trang bán hàng với framework
NestJS, xử lý thành công các chức năng, yêu cầu từ giao diện.
 Express: Tìm hiểu các chức năng của express trong NodeJS để giúp server chạy
tốt hơn code tối ưu hơn hẳn.
 ReactJS: Xây dựng thành công giao diện bằng việc style các css, các thư viện từ
bên ngoài (không dùng template có sẵn), chia giao diện rõ ràng cho từng chức
năng, chuyển trang, xử lý gọi API truy vấn data, xây dựng các chức năng cần
có của một trang web
II. Chức năng ứng dụng

Trang admin gồm các chức năng:

 Quản lý danh mục( thêm xóa sửa danh mục, tìm kiếm danh mục)
 Quản lý nhân xét đánh giá sản phẩm (admin sẽ xét duyệt những đánh giá từ
khách hàng)
 Xét duyệt sản phẩm từ seller ( sản phẩm seller được admin duyệt mới được đưa
ra bán)
 Quản lý hóa đơn (admin sẽ được phần trăm doanh thu từ đơn hàng của seller,
admin là người thực hiện giao hàng)
 Thống kê (thống kê thông qua hóa đơn bán hàng)
Trang seller gồm các chức năng:
 Quản lý thông tin seller (các thông cơ bản như tên, địa chỉ liên hệ)
 Quản lý mã giảm giá (tạo mã giảm giá)
 Quản lý sản phẩm( thêm xóa sản phần từ danh mục của admin, yêu cầu admin
duyệt sản phẩm, tìm kiếm sản phẩm)
 Quản lý hóa đơn (hóa đơn sẽ được seller duyệt trước sau đó admin mới xác
nhận giao hàng)
61
  Quản lý đánh giá và trả lời đánh giá
Trang client:
 Trang chủ hiển thị danh mục sản phẩm và các sản phẩm mới
 Trang sản phẩm có các chức năng lọc sản phẩm theo giá
 Trang tìm kiếm sản phẩm
 Trang chi tiết sản phẩm(tất cả thông tin về sản phẩm)
 Trang shop (xem thông tin về shop của sản phẩm)
 Trang chọn phương thức thanh toán
 Trang đánh giá khi mua hàng
 Trang thông tin cá nhân

Một số chức năng nổi bậc:

Thông báo cho seller khi người dùng mua sản phẩm và khi admin duyệt sản phẩm,
đối với khách hàng cũng sẽ nhận được thông báo khi đơn hàng được xác nhận hay
giao hàng xong.

Hình 29.Thông báo trên seller

Hiển thị thông tin của shop cho khách hàng biết

62
 Hình 30.Thông tin seller trên trang chủ

Thanh toán bằng momo hoặc trực tiếp và cho phép áp dụng mã giảm giá

Hình 20. Trang thanh toán của khách hàng

Seller trả lời đánh giá của khách hàng

63
Hình 31.Seller trả lời đánh giá

64
 CHƯƠNG 2: ĐÁNH GIÁ ƯU NHƯỢC ĐIỂM

Ưu điểm: tìm hiểu tốt công nghệ, có tham khảo các trang thương mại điện tử lớn, xây
dựng được website với các chức năng cơ bản, phù hợp với thực tế có thể đưa vào sử
dụng như lọc tìm kiếm sản phẩm một cách nhanh chóng, có thanh toán qua ví điện tử,
thống kê doanh thu cho người bán, thông báo qua mail một cách chính xác

Nhược điểm: giao diện trang chủ chưa được đẹp, thiếu tính phí ship hàng, còn thiếu
xót một số tín năng như hướng dẫn mua bán hàng, hỏi đáp về sản phẩm liên hệ với nhà
bán

65
 CHƯƠNG 3: HƯỚNG DẪN CHẠY ỨNG DỤNG

Bước 1: Vào link tải node  https://nodejs.org/en/ về lưu ý tải bản recommended không
tải bản mới nhất.
Bước 2: Cài yarn ở global npm install --global yarn
Bước 3: Cài MongoDB trên link https://docs.mongodb.com/manual/installation/  để
cài MongoDB version 4, cài thêm tool MongoDB Compass để sử dụng Mongo trên
link https://www.mongodb.com/try/download/compass
B4: Tải data từ thư mục database, sau đó tạo mới database với tên doan2    sau đó tạo
các collection với tên như dưới hình (branchs, categories, orderitems, orders, origins,
sellers, store, users) sau đó lấy data từ thư mục database import vào hoặc có thể dùng
theo cách chạy lệnh trên video demo.

66
 Hình 32.Giao diện lưu trữ data trên mongo compass

Bước 5: Vô trong các thư mục project tạo file có tên .env
● backend-doan: tạo thư mục tên .env rồi copy paste đoạn code dưới vào lưu lại
JWT_SELLER=seller
JWT_ADMIN=admin
JWT_USER=user
USER_FORGOT_PASSWORD_SECRET=secret_forgot
ADMIN_SECRET=admin_secret
FORGOT_PASSWORD_SECRET=forgot_password_secret
CLOUDINARY_NAME=phamtrung
CLOUDINARY_KEY=231235934529634
CLOUDINARY_SECRET=ugJFwe6vMI1huxPIZTznSm6aadE
DB_URL=mongodb://localhost/doan2
MAILGUN_KEY=f22c08854a1637490e17f1d23995c07d-f7d0b107-860e0e36
SELLER_PORTAL=http://localhost:3003
SHOP=http://localhost:3004
PAYMENT_BACK_URL=https://6d285d7f4573.ngrok.io/api/orders/checkout/m
omo

67
 Hình 33.File .env trong visual studio code

● seller-portal : copy lệnh bên dưới làm tương tự backend

NEXT_PUBLIC_API_URL=http://localhost:3002/api
PORT=3003
● doan: tượng tự
NEXT_PUBLIC_API_URL=http://localhost:3005/api
● admin: tương tự
NEXT_PUBLIC_API_URL=http://localhost:3001/api/  

Bước 6: Mở source code vào thư mục có tên backend-doan sau đó mở 3 cửa sổ
terminal chạy như hình (đối với window cũng mở terminal làm tương tự) để chạy 3
trang: trang chủ, admin, seller hoặc có thể làm theo video demo bằng cách build
docker-compose

68
 Hình 34. Terminal chạy backend

Bước 7: Mở các thư mục frontend seller-portal, admin-fe, doan sau đó cũng open
terminal ứng với từng thư mục này, gõ tất cả các cửa sổ terminal đều gõ lệnh yarn sau
đó enter để cài hết modules.

Bước 8: Khi cài xong modules thì ứng với các cửa sổ terminal chạy lệnh yarn dev ->
rồi sau đó ctrl + click chuột vào đường link để chạy mở trang trên web ví dụ như hình
đường link là http://localhost:3004

Hình 35.Chạy frontend trên terminal

69
(Lưu ý: nếu thực hiện không thành công xin vui lòng xem lại video hướng dẫn demo)

70