Xây dựng WEBSITE mua bán trao dổi hàng hóa đã qua sử dụng

Nên chúng em quyết định thực hiện đề tài “Xây dựng website mua bán và trao đổi hang hóa đã qua sử dụng” nhằm cung cấp cho người dùng một nơi đáng tin cậy: cho những người có hàng hóa đã

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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

TRẦN MINH QUỐC - 15520702 ĐẶNG TRUNG THẮNG - 15520786

KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE MUA BÁN TRAO ĐỔI HÀNG HÓA ĐÃ QUA SỬ

DỤNG

BUILD A WEBSITE TO BUYING AND EXCHANGE USED GOODS

KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM

TP HỒ CHÍ MINH, 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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

TRẦN MINH QUÔC – 15520702 ĐẶNG TRUNG THẮNG – 15520786

KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE MUA BÁN TRAO ĐỔI HÀNG HÓA ĐÃ QUA SỬ

DỤNG BUILD A WEBSITE TO BUYING AND EXCHANGE USED GOODS

KỸ SƯ/ CỬ NHÂN NGÀNH PHẦN MỀM

GIẢNG VIÊN HƯỚNG DẪN

TS NGUYỄN HÀ GIANG ThS NGUYỄN THỊ THANH TRÚC

TP HỒ CHÍ MINH, 2021 THÔNG TIN HỘI ĐỒNG CHẤM KHÓA LUẬN TỐT NGHIỆP Hội đồng chấm

khóa luận tốt nghiệp, thành lập theo Quyết định số……… ngày

……… của Hiệu trưởng Trường Đại học Công nghệ Thông tin

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT

NAM Độc Lập - Tự Do - Hạnh Phúc

TP HCM, ngày… tháng… năm 2021

Tên khóa luận:

XÂY DỰNG WEBSITE MUA BÁN TRAO ĐỔI HÀNG HÓA ĐÃ QUA SỬ DỤNG

Nhóm SV thực hiện: Cán bộ hướng dẫn: Trần Minh Quốc 15520702 TS Nguyễn Hà

Giang Đặng Trung Thắng 15520786 ThS Nguyễn Thị Thanh Trúc

Đánh giá Khóa luận

1 Về cuốn báo cáo:

Số trang _ Số chương _

Số bảng số liệu _ Số hình vẽ _

Số tài liệu tham khảo _ Sản phẩm _

Một số nhận xét về hình thức cuốn báo cáo:

2 Về nội dung nghiên cứu:

3 Về chương trình ứng dụng:

4 Về thái độ làm việc của sinh viên:

Đánh giá chung:

Điểm từng sinh viên:

Trần Minh Quốc:……… /10

Đặng Trung Thắng:……… /10

Người nhận xét (Ký tên và ghi rõ họ tên) ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập - Tự Do - Hạnh Phúc TP HCM, ngày… tháng… năm 2021 NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP CỦA CÁN BỘ PHẢN BIỆN Tên khóa luận: XÂY DỰNG WEBSITE MUA BÁN TRAO ĐỔI HÀNG HÓA ĐÃ QUA SỬ DỤNG Nhóm SV thực hiện: Cán bộ phản biện: Trần Minh Quốc 15520702 Đặng Trung Thắng 15520786 Đánh giá Khóa luận 5 Về cuốn báo cáo: Số trang _ Số chương _ Số bảng số liệu _ Số hình vẽ _ Số tài liệu tham khảo _ Sản phẩm _ Một số nhận xét về hình thức cuốn báo cáo:

6 Về nội dung nghiên cứu:

7 Về chương trình ứng dụng:

8 Về thái độlàm việc của sinh viên:

Đánh giá chung:

Điểm từng sinh viên:

Trần Minh Quốc:……… /10

Đặng Trung Thắng:……… /10

Người nhận xét

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

LỜI CẢM ƠN

Nhóm em xin gửi lời cảm ơn đến ban giám hiệu, các quý thầy cô của trường Đại học

Công nghệ Thông tin, đặc biệt là các thầy cô trong khoa Công Nghệ Phần Mềm đã

cung cho chúng em những hành trang kiến thức cần thiết, bổ ích và phong phú trong

những năm học tập tại trường

Xin bày tỏ lời cảm ơn chân thành đến cô Nguyễn Thị Thanh Trúc - người đã dành

nhiều thời gian hướng dẫn và giúp đỡ nhóm em trong suốt quá trình làm khóa luận để

có thể hoàn thành tốt khóa luận tốt nghiệp này

Tuy nhóm em đã nỗ lực rất nhiều để làm khóa luận hoàn thiện nhất có thể nhưng chắc

chắn khó tránh khỏi những thiếu sót nên kính mong quý thầy cô thông cảm và tận tình

chỉ bảo để cải thiện tốt hơn

Kính chúc quý thầy cô có thật nhiều sức khỏe và niềm tin để thực hiện sứ mệnh cao

đẹp của mình và truyền đạt kiến thức cho các thế hệ sau này

Chúng em trân trọng cảm ơn!

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập - Tự Do - Hạnh Phúc

ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI TIẾNG VIỆT: Xây dựng website mua bán trao đổi hàng hóa đã qua

sử dụng

TÊN ĐỀ TÀI TIẾNG ANH: Build a website to buying and exchange used goods

Cán bộ hướng dẫn:

TS Nguyễn Hà Giang

ThS Nguyễn Thị Thanh Trúc

Thời gian thực hiện: Từ ngày 10/03/2021 đến ngày 26/06/2021

Sinh viên thực hiện:

Trần Minh Quốc - 15520702

Đặng Trung Thắng - 15520786

Nội dung đề tài:

I) Mục tiêu của đề tài

Trong những năm trở lại đây thương mại điện tử đang phát triển rất mạnh mẽ cùng với sựgia tăng của các doanh nghiệp và hình thức thương mại điện tử Người dùng hiện nay

ngày càng có xu hướng tìm kiếm và mua hàng trên các website thương mại lớn như Tiki, Shopee, Lazada nơi cung cấp rất nhiều các mặt hàng từ trong nước đến ngoài nước

Các sản phẩm đó đều là sản phẩm mới và giá cả có thể rẻ hơn so với việc mua trực tiếp bên ngoài, nhưng nó cũng khá cao cho với một số người hạn hẹp về tài chính

Bên cạnh các nhu cầu tìm kiếm các sản phẩm mới trên mạng thì nhu cầu tìm kiếm các mặt hàng cũ, đã qua sử dụng cũng rất cao Nên chúng em quyết định thực hiện đề tài

“Xây dựng website mua bán và trao đổi hang hóa đã qua sử dụng” nhằm cung cấp cho người dùng một nơi đáng tin cậy: cho những người có hàng hóa đã qua sử dụng nhưng không dùng đến nữa, đến những người có nhu cầu tìm kiếm những mặt hàng ưng ý với giá cả phải chăng

II) Phạm vi

Xây dựng website cung cấp nơi mua bán giao dịch các hàng hóa đã qua sử dụng, kết nối giữa người có nhu cầu bán đồ dùng cũ với những người có nhu cầu tìm kiếm sản phẩm ưng ý với giá cả phải chăng

III) Đối tượng:

• Tìm hiểu thêm về kiến trúc Microservices

• Các thuật toán liên quan đến tìm kiếm

• Đối tượng trong phạm vi đề tài hướng đến:

o Người mua có kinh phí hạn hẹp, người muốn trải nghiệm sản phẩm, người mua với giá rẻ rồi bán lại kiếm lời…

o Người bán đang cần tiền, người đã trải nghiệm xong sản phẩm, người sử dụng sản phẩm nhưng không ưng ý và muốn bán lại…

IV) Phương pháp nghiên cứu:

• Tìm hiểu và phân tích nhu cầu của người dùng

• Phân loại các sản phẩm đã sử dụng vẫn còn giá trị bán lại

• Xây dựng cơ sở dữ liệu

• Xây dựng giao diện website tiện lợi cho người dùng dễ dàng sử dụng • Xây dựng tính năng chat giúp người mua và người bán tiện lợi hơn trong việc liên lạc và trao đổisản phẩm

V) Kết quả mong đợi:

• Cung cấp cho các chức năng tiện lợi cho người mua hàng dễ dàng tìm kiếm sản phẩm phù hợp với mức giá

• Cung cấp các chức năng thuận tiện cho người bán nơi đăng tải và quản lý các sản phẩm

• Cung cấp giao diện thuận tiện cho người dùng có thể responsive cho cả mobile và tablet

• Cung cấp tính năng chat để người mua và người bán dễ dàng liên lạc với nhau để trao đổi sản phẩm thuận tiện hơn

2 Tìm hiểu về Net Core, SQL Server 12/03 – 14/03 Cả hai

3 Tìm hiểu về ReactJS, Firebase 14/03 – 16/03 Cả hai

4 Phân tích nghiệp vụ, chức năng dựa

trên các thông tin thu thập về sản

phẩm và nhu cầu sử dụng của người

dùng

17/03 – 24/03 Cả hai

5 Lên bản thiết kế giao diện website 24/03 – 01/04 Cả hai

6 Xây dựng cơ sở dữ liệu 24/03 – 28/03 Cả hai

chọn đề tài 3 1.3 Mụctiêu 4 1.4 Đốitượng 4 1.5 Phạm

vi 4 1.6 Phươngpháp thực hiện 4 Chương 2 CƠ SỞ

LÝ THUYẾT VÀ CÔNG NGHỆ 6 2.1 Phân tích các trang

web đã có 6 2.1.1 Chotot.com 6 2.1.2 Chodocu.com 7 2.2 Tổng hợp 9 2.3 Công nghệ

sử dụng 10 2.3.1 ReactJS 10 2.3.2 .NET

Core 12 2.3.3 Firebase 14 2.3.4 Microsoft SQL Server: 17 2.3.5 Recommendation System 18 Chương 3 PHÂN TÍCH VÀ

THIẾT KẾ HỆ THỐNG 20 3.1 Danh sách yêu cầu 20 3.1.1 Khách hàng mới (chưa có tài khoản) 20 3.1.2 Khách hàng (đã có tài

khoản) 20 3.1.3 Người bán hàng 20 3.1.4 Quản trị viên 20 3.2 Phân tích yêu cầu 21 3.2.1 Sơ đồ Usecase 21 3.2.2 Danh sách Actor 22 3.2.3 Danh sách Usecase 22 3.2.4 Đặc tả Usecase 23 3.2.5 Sequence Diagram 33 Chương 4 THIẾT KẾ VÀ

PHÁT TRIỂN HỆ THỐNG 45 4.1 Thiết kế cơ sở dữ liệu 45 4.1.1 Lược đồ cơ sở dữ liệu 45 4.1.2 Mô tả các lớp trong cơ sở dữ

liệu 46 4.2 Các phương thức xử lý dữ liệu 53 4.2.1 Truy xuất dữ

liệu 53 4.2.2 Khởi tạo dữ liệu 54 4.2.3 Cập nhật dữ liệu 55 4.3 Triển khai hệ thống 56 4.3.1 Kiến trúc Client 57 4.3.2 Kiến trúc API

server 59 4.4 Giao diện 60 4.4.1 Danh sách các màn hình 60 4.4.2 Giao diện màn hình 61 Chương 5 KẾT LUẬN VÀ

HƯỚNG PHÁT TRIỂN 70 5.1 Kết quả đạt

được 70

5.2 Hạn chế 71 5.3 Hướng phát triển 71

DANH MỤC HÌNH Hình 2.1 Website chotot.com 6

Hình 2.2 Website chodocu.com .8

Hình 2.3 DOM .11

Hình 2.4 React Lifecycle 12

Hình 2.5 Firebase Realtime Database .15

Hình 2.6 Freebase Authentication 15

Hình 2.7 Firebase Cloud Messaging .16

Hình 2.8 Recommendation 18

Hình 3.1 Sơ đồ usecase .21

Hình 3.2 Sequence Diagram “Đăng ký tài khoản” 33

Hình 3.3 Sequence Diagram “Đăng nhập” 34

Hình 3.4 Sequence Diagram “Đăng xuất” 35

Hình 3.5 Sequence Diagram “Thêm sản phẩm vào giỏ hàng” 36

Hình 3.6 Sequence Diagram “Xóa sản phẩm trong giỏ hàng” 37

Hình 3.7 Sequence Diagram “Sửa sản phẩm trong giỏ hàng” 38

Hình 3.8 Sequence Diagram “Thanh toán” 39

Hình 3.9 Sequence Diagram “Đăng bài” 40

Hình 3.10 Sequence Diagram “Quản lý danh mục” 41

Hình 3.11 Sequence Diagram “Quản lý hình ảnh” 42

Hình 3.12 Sequence Diagram “Quản lý tài khoản” 43

Hình 3.13 Sequence Diagram “Quản lý bài đăng” 44

Hình 4.1 Lược đồ cơ sở dữ liệu 45

Hình 4.2 Truy xuất dữ liệu 54

Hình 4.3 Khởi tạo dữ liệu 55

Hình 4.4 Cập nhật dữ liệu 56

Hình 4.5 Kiến trúc Client 57

Hình 4.6 Kiến trúc API server 59

Hình 4.7 Màn hình Home 61

Hình 4.8 Màn hình Chi tiết sản phẩm 62

Hình 4.9 Màn hình Giỏ hàng 63

Hình 4.10 Tạo thông tin cơ bản 63

Hình 4.11 Tạo thông tin bán hàng 64

Hình 4.12 Tạo thông tin vận chuyển 64

Hình 4.13 Hoàn tất .65

Hình 4.14 Màn hình Quản lý tài khoản 65

Hình 4.15 Chỉnh sửa thông tin tài khoản 66

Hình 4.16 Màn hình Quản lý hình ảnh 66

Hình 4.17 Màn hình Thêm hình ảnh 67

Hình 4.18 Màn hình Sửa hình ảnh 67

Hình 4.19 Màn hình Quản lý danh mục 68

Hình 4.20 Màn hình Thêm danh mục 68

Hình 4.21 Màn hình Sửa danh mục 69

DANH MỤC BẢNG Bảng 3.1 Danh sách Actor .22

Bảng 3.2 Danh sách Usecase .23

Bảng 3.3 Đặc tả Usecase “Đăng ký tài khoản” 24

Bảng 3.4 Đặc tả Usecase “Đăng nhập” 24

Bảng 3.5 Đặc tả Usecase “Đăng xuất” 25

Bảng 3.6 Đặc tả Usecase “Thêm sản phẩm vào giỏ hàng” 26

Bảng 3.7 Đặc tả Usecase “Xóa sản phẩm trong giỏ hàng” 27

Bảng 3.8 Đặc tả Usecase “Sửa sản phẩm trong giỏ hàng” 27

Bảng 3.9 Đặc tả Usecase “Thanh toán” 28

Bảng 3.10 Đặc tả Usecase “Đăng bài” 29

Bảng 3.11 Đặc tả Usecase “Quản lý danh mục” 30

Bảng 3.12 Đặc tả Usecase “Quản lý hình ảnh” 31

Bảng 3.13 Đặc tả Usecase “Quản lý tài khoản” 31

Bảng 3.14 Đặc tả Usecase “Quản lý bài đăng” 32

Bảng 4.1 Lớp Admin 46

Bảng 4.2 Lớp Bids .47

Bảng 4.3 Lớp Categories 47

Bảng 4.4 Lớp CategoryGroups .48

Bảng 4.5 Lớp CategoryProduct 48

Bảng 4.6 Lớp Images 49

Bảng 4.7 Lớp Products 51

Bảng 4.8 Lớp Roles 51

Bảng 4.9 Lớp Slides 52

Bảng 4.10 Lớp Transactions .52

Bảng 4.11 Lớp Users 53

Bảng 4.12 Các thành phần kiến trúc Client 58

Bảng 4.13 Các thành phần kiến trúc API server 59

Bảng 4.14 Danh sách các màn hình 60

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

TÓM TẮT KHÓA LUẬN

Khóa luận đề tài “Xây dựng website mua bán và trao đổi hàng hoá đã qua sử dụng” được xây dựng thông qua việc tham khảo một số nhu cầu mua bán hàng cũ của người dùng và các trang thuơng mại điện tử như chotot.com, chodocu.com…

Chúng em xây dựng một trang web mua bán đồ cũ với các chức năng cở bản như tìm

kiếm mua và mua bán hàng hoá đã qua sử dụng Ngoài ra còn có thêm các chức năng như: Xây dựng kênh chat giữ người mua và người bán, chatbot hỗ trợ người bán trả lờikhách hàng khi offline, hệ thống gợi ý sản phẩm cho người dùng (Recommendation System), quản lý kiểm duyệt bài đăng

Qua nghiên cứu tìm hiều thì chúng em lựa chọn một số công nghệ sau để thực hiện xây dựng đề tài như: ReactJS Framework (Font-end), DotNet Core Framework (back-end), Microsoft SQL Server, Firebase Cloud Messaging, Firebase Storage, Firebase Realtime Database

Nội dung khóa luận được trình bày trong 5 chương:

Chương 1: Tổng quan đề tài

Giới thiệu tổng quan về đề tài Nêu ra lý do chọn đề tài, mục tiêu, đối tượng, phạm vi

và phương pháp thực hiện

Chương 2: Cơ sở lý thuyết và công nghệ

Phân tích các trang web hiện có, tổng hợp các ưu nhược điểm từ đó đưa ra các giải pháp cho trang web và đề ra các công nghệ được sử dụng

Chương 3: Phân tích và thiết kế hệ thống

Liệt kê, phân tích chi tiết các yêu cầu của đề tài và đặc tả các chức năng của nó

Chương 4: Thiết kế và phát triển hệ thống

Thiết kế, mô tả các phương thức xử lý của cơ sở dữ liệu sau đó triển khai hệ thống vàtrình bày giao diện

1

Chương 5: Kết luận và hướng phát triển

Tổng hợp lại những thuận lợi, khó khăn trong quá trình phát triển đề tài và nêu ra hướng phát triển trong tương lai

2

Chương 1 TỔNG QUAN ĐỀ TÀI

1.1 Giới thiệu đề tài

Trong những năm trở lại đây internet phát triển rất nhanh tại Việt Nam Người dân sử dụng internet hàng ngày tại gia đình, cơ quan và tại mọi nơi mà có internet Đây chính

là điều kiện tốt để thương mại điện tử đang phát triển mạnh mẽ cùng với sự gia tăng của các doanh nghiệp và hình thức thương mại điện tử

Việc mua bán hàng hoá đã qua sử dụng trên internet đẫ trở nên phổ biến hơn trước rấtnhiều, khi mua bán đồ cũ vừa giúp người bán có được một số tiền nhờ vào những đồ vật không còn sử dụng trong khi đó đối với người mua thì lại tiết kiệm được chi phí thay vì mua hàng mới

Các mặt hàng được đăng bán ngày một đa dạng từ những món đồ bình thường như tivi, tủ lạnh, quần áo, vật nuôi tới những món đồ thời trang cao cấp Mới đây một thương hiệu thời trang nổi tiếng là Gucci đã công bố hợp tác với The RealReal, trang thương mại điện tử chuyên kinh doanh hàng cao cấp đã qua sử dụng với 17 triệu

người dùng

Điều này cho thấy rằng thị trường mua bán đồ cũ đang ngày càng phát triển mạnh

mẽ và hướng tới mọi đối tượng

có nhu cầu tìm kiếm những mặt hàng ưng ý với giá cả phải chăng Tăng nhu cầu muasắm các mặt hàng cũ cũng góp một phần không nhỏ tới việc bảo vệ môi

3 trường Khi các món hàng có thể được tái sử dụng tiếp thay vì bị bỏ đi và vứt ra ngoài

môi trường

1.3 Mục tiêu

Xây dựng website cung cấp nơi mua bán giao dịch các hàng hóa đã qua sử dụng, kết nối giữa người có nhu cầu bán đồ dùng cũ với những người có nhu cầu tìm kiếm sản phẩm ưng ý với giá cả phải chăng

• Tham khảo các trang web bán đồ cũ đã có trên thị trường

• Nghiên cứu các công nghệ để áp

2.1 Phân tích các trang web đã có

2.1.1 Chotot.com

Mô tả chung:

Chợ Tốt là website mua bán rao vặt cho phép người mua và người bán kết nối và giao dịch an toàn, dễ dàng trong một môi trường tiện lợi và rõ ràng

Đăng tin rao vặt hoàn toàn miễn phí Website hỗ trợ tìm kiếm nhanh các đăng tin rao vặt vô cùng nhanh chóng ở tất cả các danh mục khác nhau từ bất động sản, điện thoại,

xe máy, vật nuôi…

Hình 2.1 Website chotot.com

Nhận xét: Giao diện bắt mắt, dễ nhìn tạo cảm giác thoải mái khi lướt web Trang

web có hệ thống kiểm duyệt bài đăng, tuy nhiên vẫn cho thấy các hiện tượng bàiđăng giá ảo, spam Chợ tốt không có phần đánh giá sản phẩm, mặc dù thực trạng

6 cho thấy trên chotot có các cửa hàng đồ cũ thường đăng bán rất nhiều sản phẩm Người dùng cần nhìn nhận các đánh giá đó để xem chất lượng có tốt hay không Người dùng thương lượng giá cả qua tin nhắn hoặc liên hệ trực tiếp với người đăng đểmua Tuy nhiên để thuận tiện hơn cho người bán hàng Nên có mục trả giá để tổng hợpcác mức giá mà người dùng đưa ra để người bán có quyết định nhanh hơn thay vì phải

xem từng tin nhắn

2.1.2 Chodocu.com

Mô tả chung:

Chodocu.com là một địa chỉ đáng tin cậy từ những người có sản phẩm hàng hóa đã qua sử dụng và không dùng đến nữa, đến những người có nhu cầu tìm kiếm và mua sản phẩm hàng hóa ưng ý khi còn hạn chế về tài chính, hay đơn giản là tìm kiếm những món đồ độc lạ với giá tốt nhất Chodocu.com sẽ trở thành một nơi để người mua và người bán kết nối nhanh chóng và thuận tiện - một thị trường mua bán sôi động

7

Hình 2.2 Website chodocu.com

Nhận xét: trang web thiết kế khá đơn giản không cầu kỳ nhưng bố cục chưa được đẹp

mắt Không có thông tin ngày giờ đăng cụ thể để người dùng dễ dàng tìm kiếm Không

có mục chat với người bán Hiện trang web cũng không thể đăng nhập hay đăng kí được bằng Email hay Facbook Cho phép tạo bài đăng mà không cần đăng nhập dễ dẫnđến tình trạng lừa đảo , spam

mà có khả năng bán lại đa số là các mặt hàng điện tử, các nhãn hiệu thời trang nổi tiếng, các phương tiện đi lại, thú cưng, cây cảnh, đồ trang sức, đá quý và đặc biệt là bất động sản…

Dựa vào những thông tin đã phân tích thì nhóm em sẽ liệt kê các chức năng của trang web như sau:

• Đối với người mua hàng:

2.3.1.1 Giới thiệu về ReactJS

ReactJS là một thư viện JavaScript có tính hiệu quả và linh hoạt để xây dựng các

thành phần giao diện người dùng (UI) có thể sử dụng lại ReactJS giúp phân chia các

UI phức tạp thành các thành phần nhỏ (được gọi là component) Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook ReactJS ban đầu được phát triển và duy trì bởi Facebook và sau đó được sử dụng trong các sản phẩm của mình như

WhatsApp & Instagram

ReactJS được dùng để xây dựng các ứng dụng [single page application] (SPA) Một trong những điểm hấp dẫn của ReacJS là nó không chỉ được xây dựng bên phía clients

mà còn sử dụng được bên phía server

2.3.1.2 Virtual DOM

Để hiểu rõ khái niệm về Virtual DOM, chúng ta cùng nhau đi tìm hiểu về DOM trước DOM là một [Document Object Model] và là một cấu trúc trừu tượng của text Các đoạn mã HTML được gọi là HTML DOM Mỗi elements trong HTML là các nodes của DOM đó

Tại sao có DOM rồi lại cần Virtual DOM (DOM ảo)? Khi chúng ta làm việc với một DOM, khi một nodes thay đổi thì tất cả các nodes cũng phải thay đổi theo Giả sử, chúng ta có một list danh sách gồm 10 items, nếu chúng ta thay đổi 1 items thì DOM cũng thay đổi 9 items còn lại về trạng thái ban đầu của nó

Điều này là không cần thiết, mặc dù tốc độ xử lý của DOM khá nhanh nhưng đối với các ứng dụng SPA việc thay đổi các DOM này là liên tục nên nó sẽ xảy ra khá chậm

và không khả thi đi xây dựng ứng dụng lớn Lúc này Virtual DOM sẽ được dùng để thay thế Nó được xây dựng dựa trên DOM thật, có một vài thuộc tính của DOM thật nhưng khi thay đổi Virtual DOM sẽ không thực hiện thay đổi trên màn

10 hình giống như DOM thật

Hình 2.3 DOM Khi chúng ta thực hiện render một JSX element, mỗi Virtual DOM object sẽ được cập nhật, khi virtual DOM được cập nhật, ReactJS sẽ so sánh virtual DOM với virtual DOM trước đó để kiểm tra trước khi thực hiện cập nhật và sau đó sẽ cập nhật trên một phần của DOM thật Thay đổi của DOM thật sẽ được hiển thị ra màn hình

2.3.1.3 React Lifecycle:

React Lifecycle là một vòng đời của component, khi chúng ta tiến hành render một component thì ReactJS thực hiện nhiều tiến trình khác nhau, các tiến trình này được lặp đi lặp lại đối với các component

11

Hình 2.4 React Lifecycle Giả sử khi một component được gọi trước tiên nó sẽ cài đặt props và state, sau đó tiến hành mouting, update, unmouting… việc tham gia vào quá trình này bạn cần sử dụng đến các hàm hỗ trợ của lifcecycle

2.3.1.4 Ứng dụng vào đề tài

Sử dụng ReactJS xây dựng phần Fron-end cho website

2.3.2 .NET Core

2.3.2.1 .NET Core là gì:

.NET Core là một nền tảng phát triển đa mục đích, mã nguồn mở được duy trì bởiMicrosoft và cộng đồng NET trên GitHub Đó 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ị, đámmây và IoT

2.3.2.2 Đặc điểm của NET Core:

Đa nền tảng: Chạy trên các hệ điều hành Windows, macOS và Linux

Nhất quán trên các kiến trúc: có thể chạy mã nguồn của bạn với cùng một hành vi trên nhiều kiến trúc hệ thống, bao gồm x64, x86 và ARM

12 Các công cụ dòng lệnh: Bao gồm các công cụ dòng lệnh dễ sử dụng, có thể được sử dụng để phát triển cục bộ và trong các tình huống tích hợp liên tục

Triển khai linh hoạt: có thể cài đặt song song (cài đặt toàn người dùng hoặc toàn hệ

thống) Có thể được sử dụng với các container Docker

Tương thích: NET Core tương thích với NET Framework, Xamarin và Mono, thông qua NET Standard

Nguồn mở: Nền tảng NET Core là nguồn mở, sử dụng giấy phép MIT và Apache

2 .NET Core là một dự án NET Foundation

Được hỗ trợ bởi Microsoft: NET Core được Microsoft hỗ trợ, theo Hỗ trợ NET Core

2.3.2.3 Ngôn ngữ hỗ trợ:

.NET Core hỗ trợ đầy đủ C # và F # (và C ++ / CLI kể từ 3.1; chỉ được bật trên Windows) và hỗ trợ một phần Visual Basic NET

2.3.2.4 Thành phần của NET Core:

.NET Core runtime: cung cấp một hệ thống kiểu, tải lắp ráp, trình thu gom rác, interop gốc và các dịch vụ cơ bản khác Các thư viện khung NET Core cung cấp các kiểu dữ liệu nguyên thủy, các kiểu thành phần ứng dụng và các tiện ích cơ bản ASP.NET Core runtime: cung cấp khung để xây dựng các ứng dụng kết nối internet, điện toán đám mây hiện đại, chẳng hạn như ứng dụng web, ứng dụng IoT và phụ trợ

2.3.2.5 Ứng dụng vào đề tài

Sử dụng Net Core Framwork (ngôn ngữ lập trình C#) để lập trình phía back-end server

2.3.3 Firebase

2.3.3.1 Firebase là gì:

Firebase là một nền tảng để phát triển ứng dụng di động và trang web, bao gồm cácAPI đơn giản và mạnh mẽ mà không cần backend hay server giúp các lập trình viên rútngắn thời gian triển khai và mở rộng quy mô của ứng dụng mà họ đang phát

triển

Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây – cloud Kèm theo

đó là hệ thống máy chủ cực kỳ mạnh mẽ của Google Chức năng chính là giúp người dùng lập trình ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu

• Firebase Realtime Database: là một cơ sở dữ liệu NoSQL được lưu trữ đám mâycho phép bạn lưu trữ và đồng bộ dữ liệu Dữ liệu được lưu trữ dưới dạng JSON

và được đồng bộ hoát theo thời gian thực cho mọi máy kết nối Ứng dụng sửdụng Firebase vẫn khả dụng khi ngoại tuyến vì Firebase Realtime DatabaseSDK vẫn lưu dữ liệu của bạn trên local Khi kết nối được thiết lập

14 lại, thiết bị sẽ được cập nhật thay đổi nào đã bỏ lỡ và đồng bộ hóa dữ liệu hiện tại với máy chủ

Hình 2.5 Firebase Realtime Database

• Freebase Authentication: hoạt động nổi bật của Firebase là xây dựng các bướcxác thực người dùng bằng Email, Facebook, Twitter, GitHub, Google Đồngthời cũng xác thực nặc danh cho các ứng dụng Hoạt động xác thực có thể giúpthông tin cá nhân của người sử dụng được an toàn và đảm bảo không bị đánhcắp tài khoản

Hình 2.6 Freebase Authentication

• Firebase Cloud Messaging (FCM): là giải pháp tin nhắn đa nền tảng cho phép bạn phân phối tin nhắn đáng tin cậy mà hoàn toàn không tốn một chi phí Sử

15 dụng FCM có thể thông báo tới ưng dụng một email mới hay một dữ liệu mới

đã sẵn sàng để đồng bộ

Hình 2.7 Firebase Cloud Messaging

• Firebase Storage: Là dịch vụ được xây dựng cho mục đích lưu trữ và quản lý nội dung mà người dùng ứng dụng tạo ra như ảnh, video hay dữ liệu dạng file

2.3.3.2 Ưu điểm:

• Tạo tài khoản và sử dụng dễ dàng

• Tốc độ phát triển nhanh

• Nhiều dịch vụ trong một nền tảng

• Được cung cấp bởi Google

• Tập trung vào phát triển giao diện người dùng

• Firebase không có máy chủ

• Học máy (Machine Learning)

• Tạo lưu lượng truy cập

• Theo dõi lỗi

• Sao lưu

2.3.3.3 Hạn chế:

• Không phải là mã nguồn mở

• Người dùng không có quyền truy cập mã nguồn

• Firebase không hoạt động ở nhiều quốc gia

• Chỉ hoạt động với Cơ sở dữ liệu NoSQL

16

• Truy vấn chậm

• Không phải tất cả các dịch vụ Firebase đều miễn phí

• Firebase khá đắt và giá không ổn định

• Chỉ chạy trên Google Cloud

• Thiếu Dedicated Servers và hợp đồng doanh nghiệp

• Không cung cấp các API GraphQL

2.3.3.4 Ứng dụng vào đề tài

Sử dụng Firebase Authentication để làm phía sử lý phần đăng nhập bằng Phone Number, Facebook, Google Mail, hay Email

Sử dụng Firebase Cloud Message để đẩy thông báo tới người dùng, thông báo tin đã bán thành công, thông báo có tin nhắn…

Sử dụng Firebase Realtime Database để làm phần lưu trữ tin nhắn, bình luận, thay thế luôn cho phần back-end

Sử dụng Firebase Storage để lưu trữ ảnh

2.3.4 Microsoft SQL Server:

2.3.4.1 Microsoft SQL Server là gì:

SQL Server là một hệ thống quản lý cơ sở dữ liệu quan hệ (relational database management system viết tắt là RDBMS), hỗ trợ một số lượng lớn các quy trình xử lý giao dịch, ứng dụng doanh nghiệp và ứng dụng phân tích trong các công ty IT SQL Server là một trong 3 công nghệ dữ liệu dẫn đầu hiện này cùng với Oracle Database

và IBM’s DB2

2.3.4.2 Ứng dụng vào đề tài

Sử dụng Sql Server để lưu trữ database chính của website

17

2.3.5 Recommendation System

2.3.5.1 Recommendation là gì ?

Hình 2.8 Recommendation

Một hệ thống gợi ý (hay còn gọi là hệ thống khuyên dùng, tiếng Anh:

recommendation system) là một lớp con của hệ thống lọc thông tin, tìm kiếm dự đoán

"đánh giá" hoặc "ưa thích" của người dùng với một sản phẩm hoặc đối tượng nào đó.Hệ thống gợi ý chủ yếu dùng trong các ứng dụng thương mại

Các hệ thống gợi ý được tận dụng trong nhiều lĩnh vực, chẳng hạn như trình tạo danh sách phát cho video và âm nhạc của một số ứng dụng như Netflix, YouTube và

Spotify Sau khi người xem một vài video hoặc nghe một số bài hát, hệ thống gợi ý sẽ nhận diện sở thích người dùng và mức độ tương tác với video/bài hát để tạo ra một danh sách gợi ý theo chủ đề và mức độ liên quan mà người dùng có thể ưa thích Hệ thống gợi ý còn áp dụng cho các dịch vụ gợi ý sản phẩm ở Amazon, các gợi ý nội dungcho các nền tảng xã hội như Facebook hay Twitter

liệu đầu vào thành dự đoán

Nền tảng này cho phép bạn đào tạo một mô hình tùy chỉnh bằng cách chỉ định mộtthuật toán hoặc sử dụng một thuật toán được tạo, có sẵn và đã được đào tạo từ nềntảng TensorFlow và ONNX Phiên bản 64-bit tương thích với tất cả các nền tảng Phiên bản 32-bit tương thích với Windows, ngoại trừ chức năng liên quan đến

TensorFlow, LightGBM và ONNX

2.3.5.3 Ứng dụng vào đề tài

Sử dụng ML Net để xây dựng hệ thống gợi ý sản phẩm cho đề tài Cũng cấp các sản phẩm theo thông tin thu thập được từ người dùng

19

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

3.1 Danh sách yêu cầu

Danh sách các yêu cầu chức năng của trang web được phân loại theo từng loại

người dùng

3.1.1 Khách hàng mới (chưa có tài khoản)

• Tìm kiếm các sản phẩm (theo tên sản phẩm)

• Xem thông tin chi tiết của sản phẩm (giá cả, phí ship…) •

Xem danh sách sản phẩm khuyến nghị

• Xem thông tin của người bán hàng

3.1.2 Khách hàng (đã có tài khoản)

• Tìm kiếm các sản phẩm (theo tên sản phẩm)

• Xem thông tin chi tiết của sản phẩm (giá cả, phí ship…) • Xem danh sách sản phẩm khuyến nghị dựa trên dữ liệu đã thu thập được • Xem thông tin của người bán hàng

• Thêm sản phẩm vào giỏ hàng

• Thêm sản phẩm vào mục yêu thích

• Thanh toán đơn hàng

• Chat với người bán hàng

3.1.3 Người bán hàng

• Đăng bài viết bán hàng

3.1.4 Quản trị viên

3.2 Phân tích yêu cầu

3.2.1 Sơ đồ Usecase

Hình 3.1 Sơ đồ usecase

21

3.2.2 Danh sách Actor

thể thanh toán

Khách hàng Có thể thanh toán sau khi thêm

sản phẩm vào giỏ hàng

sản phẩm của mình

tài khoản, danh mục

Bảng 3.1 Danh sách Actor

3.2.3 Danh sách Usecase

1 Đăng ký tài khoản Tạo tài khoản dành cho khách hàng

4 Thêm sản phẩm vào giỏ hàng Thêm sản phẩm vào giỏ

5 Xóa sản phẩm khỏi giỏ hàng Xóa sản phẩm khỏi giỏ

6 Sửa sản phẩm trong giỏ hàng Chỉnh sửa đặc tính, số lượng,… của sản

phẩm trong giỏ

22

7 Thanh toán Thanh toán các sản phẩm trong giỏ hàng

theo các hình thức của web

9 Quản lý danh mục hàng Thêm hoặc chỉnh sửa danh mục

10 Quản lý hình ảnh Thêm hoặc chỉnh sửa hình ảnh

11 Quản lý tài khoản Chỉnh sửa tài khoản của khách hàng

12 Quản lý bài đăng Phê duyệt bài đăng của nhà bán hàng

Bảng 3.2 Danh sách Usecase

3.2.4 Đặc tả Usecase

3.2.4.1 Đăng ký tài khoản:

của mình để đăng ký

− Hệ thống sẽ kiểm tra thông tin

và tạo tài khoản

Điều kiện trước khi bắt đầu Usecase − Nhấn vào nút “Register” trên

Website

Trạng thái sau khi thực hiện Usecase − Nếu đăng ký thành công hệ thống

sẽ gửi thông báo về email

23

− Nếu thất bại sẽ hiện thông báothất bại và yêu cầu nhập lạithông tin đăng ký

Bảng 3.3 Đặc tả Usecase “Đăng ký tài khoản”

3.2.4.2 Đăng nhập: