xây dựng nhà sách online sử dụng golang và reactjs

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (11.56 MB, 120 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>ĐỒ ÁN TỐT NGHIỆP</b>

<b> NGÀNH CÔNG NGHỆ THÔNG TIN </b>

<b>GVHD: TS. LÊ VĂN VINH SVTH: NGUYỄN MINH CHIẾN NGUYỄN MINH CƯƠNG BÙI ĐÌNH XUÂN </b>

<b>XÂY DỰNG NHÀ SÁCH ONLINE SỬ DỤNG GOLANG VÀ REACTJS </b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>KHOA CÔNG NGHỆ THÔNG TIN </b>

<b>---o0o--- </b>

<b>KHÓA LUẬN TỐT NGHIỆP </b>

NGUYỄN MINH CHIẾN 19110173 NGUYỄN MINH CƯƠNG 19110016 BÙI ĐÌNH XUÂN 19110320

<b>GIẢNG VIÊN HƯỚNG DẪN: </b> TS. LÊ VĂN VINH

<b>Tp. Hồ Chí Minh, tháng 12 năm 2023 </b>

<b>XÂY DỰNG NHÀ SÁCH ONLINE SỬ DỤNG GOLANG VÀ REACTJS </b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>---o0o--- </b>

<b>KHÓA LUẬN TỐT NGHIỆP </b>

<b>XÂY DỰNG NHÀ SÁCH ONLINE SỬ DỤNG GOLANG VÀ REACTJS </b>

NGUYỄN MINH CHIẾN 19110173 NGUYỄN MINH CƯƠNG 19110016 BÙI ĐÌNH XUÂN 19110320

<b>GIẢNG VIÊN HƯỚNG DẪN: </b> TS. LÊ VĂN VINH

<b>Tp. Hồ Chí Minh, tháng 12 năm 2023 </b>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

---***---- ----***----

<i><b>Tp. Hồ Chí Minh, ngày 14 tháng 12 năm 2023 </b></i>

<b>NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP </b>

Họ và tên sinh viên:

Nguyễn Minh Chiến MSSV: 19110173 Nguyễn Minh Cương MSSV: 19110016 Bùi Đình Xn MSSV: 19110320 Chun ngành: Cơng nghệ phần mềm

Giáo viên hướng dẫn: TS. Lê Văn Vinh Ngày giao đề tài : 25/08/2023 Ngày nộp đề tài : 29/12/2023

1. Tên đề tài: Xây dựng nhà sách online sử dụng Golang và ReactJS 2. Các số liệu, tài liệu ban đầu: khảo sát hiện trạng các ứng dụng tương tự

3. Nội dung thực hiện: tìm hiểu và áp dụng các cơng nghệ ReactJS, PostgreSQL, Gin framework vào dự án

4. Sản phẩm: Website kinh doanh sách NMC

<b>Trưởng ngành Giáo viên hướng dẫn </b>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

---***---- ----***----

<b>PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN </b>

Họ và tên sinh viên: Nguyễn Minh Chiến MSSV: 19110173 Nguyễn Minh Cương MSSV: 19110016 Bùi Đình Xuân MSSV: 19110320 Ngành: CNTT Chuyên ngành: Công nghệ phần mềm Lớp: 19110CLST4 Họ và tên Giáo viên hướng dẫn: TS. Lê Văn Vinh <b>NHẬN XÉT </b>1. Về nội dung báo cáo & khối lượng thực hiện: ...

...

2. Ưu điểm: ...

...

3. Khuyết điểm: ...

<i>TP.Hồ Chí Minh, ngày …. Tháng…. năm 2023 </i>

Giáo viên hướng dẫn

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

---***---- ----***----

<b>PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN </b>

Họ và tên sinh viên: Nguyễn Minh Chiến MSSV: 19110173 Nguyễn Minh Cương MSSV: 19110016 Bùi Đình Xuân MSSV: 19110320 Ngành: CNTT Chuyên ngành: Công nghệ phần mềm Lớp: 19110CLST4 Họ và tên Giáo viên phản biện: ThS. Lê Thị Minh Châu <b>NHẬN XÉT </b>1. Về nội dung báo cáo & khối lượng thực hiện: ...

...

2. Ưu điểm: ...

...

3. Khuyết điểm: ...

<i>TP.Hồ Chí Minh, ngày …. Tháng…. năm 2023 </i>

Giáo viên phản biện

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

trường Đại Học Sư Phạm Kỹ Thuật TP.HCM lời cảm ơn chân thành và sâu sắc nhất. Đặc biệt, em xin gửi đến thầy Lê Văn Vinh, người đã tận tình hướng dẫn, giúp đỡ em hồn thành bài báo cáo này lời cảm ơn sâu sắc nhất. Trong q trình làm báo cáo, em đã có cơ hội tìm hiểu thêm những gì đã học.

Em cũng xin gửi lời cám ơn tới các thầy cô của trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh – đặc biệt là các giảng viên của khoa Cơng Nghệ Thơng Tin, đã nhiệt tình chia sẻ rất nhiều kiến thức và kinh nghiệm cho chúng em trong quá trình học tập tại trường. Để giúp em có thể hồn thành đề tài một cách tốt nhất.

Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế nên bài đề tài này không thể tránh được những thiếu sót. Em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các quý thầy cơ để em có điều kiện bổ sung, nâng cao ý thức của mình, phục vụ tốt hơn cơng tác thực tế sau này.

Nhóm em xin chân thành cảm ơn !

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

2. MỤC TIÊU CỦA ĐỀ TÀI ... 1

3. ĐỐI TƯỢNG NGHIÊN CỨU ... 1

2.4. Yêu cầu đề tài ... 12

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ... 15

CHƯƠNG 4: THIẾT KẾ CƠ SỞ DỮ LIỆU ... 66

4.1. Lược đồ cơ sở dữ liệu ... 70

4.2. Mô tả dữ liệu bảng ... 71

CHƯƠNG 5: THIẾT KẾ GIAO DIỆN ... 80

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Hình 3: Trang web Phương Nam ... 10

Hình 4: Trang web Tiki ... 11

Hình 5: Kiến trúc chung của hệ thống ... 12

Hình 6: Lược đồ Use case phía người dùng ... 16

Hình 7: Lược đồ Use case phía admin ... 17

Hình 8: Lược đồ ERD của hệ thống ... 46

Hình 9: Lược đồ tuần tự chức năng đăng nhập ... 47

Hình 10: Lược đồ tuần tự chức năng đăng ký ... 48

Hình 11: Lược đồ tuần tự chức năng chỉnh sửa thông tin cá nhân ... 49

Hình 12: Lược đồ tuần tự chức năng thay đổi mật khẩu ... 50

Hình 13: Lược đồ tuần tự chức năng quên mật khẩu ... 51

Hình 14: Lược đồ tuần tự xem thơng tin chi tiết của 1 sản phẩm ... 52

Hình 15: Lược đồ tuần tự chức năng thêm sản phẩm vào giỏ hàng ... 53

Hình 16: Lược đồ tuần tự chức năng xoá sản phẩm ra khỏi giỏ hàng ... 53

Hình 17: Lược đồ tuần tự chức năng chỉnh sửa số lượng sản phẩm trong giỏ hàng 54 Hình 18: Lược đồ tuần tự chức năng xem giỏ hàng ... 54

Hình 19: Lược đồ tuần tự chức năng thêm sản phẩm vào mục sản phẩm yêu thích 55 Hình 20: Lược đồ tuần tự chức năng xố sản phẩm khỏi mục sản phẩm u thích . 55Hình 21: Lược đồ tuần tự chức năng thêm sản phẩm vào giỏ hàng từ mục sản phẩm u thích ... 56

Hình 22: Lược đồ tuần tự chức năng xem mục sản phẩm u thích ... 57

Hình 23: Lược đồ tuần tự chức năng tìm kiếm ... 57

Hình 24: Lược đồ tuần tự chức năng đánh giá sản phẩm ... 58

Hình 25: Lược đồ tuần tự chức năng đặt hàng ... 58

Hình 26: Lược đồ tuần tự chức năng thêm địa chỉ ... 59

Hình 27: Lược đồ tuần tự chức năng sửa địa chỉ ... 60

Hình 28: Lược đồ tuần tự chức năng xố địa chỉ\ ... 61

Hình 29: Lược đồ tuần tự chức năng tạo sản phẩm ... 62

Hình 30: Lược đồ tuần tự chức năng chỉnh sửa thơng tin sản phẩm ... 63

Hình 31: Lược đồ tuần tự chức năng tạo danh mục ... 64

Hình 32: Lược đồ tuần tự chức năng sửa danh mục... 65

Hình 33: Lược đồ tuần tự chức năng xem đơn hàng của người dùng ... 65

Hình 34: Lược đồ tuần tự chức năng xoá sản phẩm của website ... 66

Hình 35: Lược đồ tuần tự chức năng xố danh mục ... 67

Hình 36: Lược đồ tuần tự chức năng xố đánh giá ... 68

Hình 37: Lược đồ tuần tự chức năng đăng xuất ... 69

Hình 39: Lược đồ cơ sở dữ liệu của hệ thống ... 70

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

Hình 45: Giao diện trang đăng ký ... 83

Hình 46: Giao diện trang danh sách sản phẩm ... 83

Hình 47: Giao diện chi tiết sản phẩm ... 84

Hình 48: Giao diện thơng tin cá nhân người dùng ... 84

Hình 49: Giao diện xem đơn hàng đã đặt ... 85

Hình 50: Giao diện sản phẩm u thích ... 85

Hình 51: Giao diện giỏ hàng ... 86

Hình 52: Giao diện kết quả tìm kiếm ... 86

Hình 53: Giao diện đặt hàng 1... 87

Hình 54: Giao diện đặt hàng 2... 87

Hình 55: Giao diện đặt hàng 3... 88

Hình 56: Giao diện dialog đổi mật khẩu ... 88

Hình 57: Giao diện dialog quên mật khẩu ... 89

Hình 58: Hình ảnh Screenflow phía admin ... 89

Hình 59: Giao diện trang Dashboard – xem doanh thu ... 90

Hình 60: Giao diện trang quản lý sản phẩm ... 90

Hình 61: Giao diện trang thơng tin chi tiết sản phẩm ... 91

Hình 62: Giao diện quản lý danh mục ... 91

Hình 63: Dialog chỉnh sửa tên danh mục con ... 92

Hình 64: Dialog tạo danh mục mới ... 92

Hình 65: Giao diện xem đơn hàng người dùng ... 93

Hình 66: Giao diện xem đánh giá ... 94

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

Bảng 1: Bảng mô tả yêu cầu chức năng của hệ thống phía user ... 13

Bảng 2: Bảng mơ tả u cầu chức năng của hệ thống phía admin ... 13

Bảng 3: Bảng mô tả yêu cầu chức năng của hệ thống ... 14

Bảng 4: Bảng mô tả yêu cầu phi chức năng ... 14

Bảng 5: Bảng mô tả Use case của hệ thống ... 20

Bảng 6: Bảng đặc tả Use case đăng ký ... 21

Bảng 7: Bảng đặc tả Use case đăng nhập ... 21

Bảng 8: Bảng đặc tả Use case đăng xuất ... 22

Bảng 9: Bảng đặc tả Use case Xem sản phẩm ... 23

Bảng 10: Bảng đặc tả Use case Xem chi tiết sản phẩm ... 23

Bảng 11: Bảng đặc tả Use case tìm kiếm sản phẩm ... 24

Bảng 12: Bảng đặc tả Use case thêm sản phẩm vào giỏ hàng... 25

Bảng 13: Bảng đặc tả Use case chỉnh sửa số lượng sản phẩm trong giỏ hàng ... 25

Bảng 14: Bảng đặc tả Use case xóa sản phẩm khỏi giỏ hàng ... 26

Bảng 15: Bảng đặc tả Use case xem thông tin giỏ hàng ... 27

Bảng 16: Bảng đặc tả Use case xem sản phẩm trong mục sản phẩm yêu thích ... 27

Bảng 17: Bảng đặc tả Use case thêm sản phẩm vào mục sản phẩm yêu thích... 28

Bảng 18: Bảng đặc tả Use case xóa sản phẩm khỏi mục sản phẩm u thích ... 29

Bảng 19: Bảng đặc tả Use case thêm sản phẩm vào giỏ hàng từ mục sản phẩm yêu thích ... 30

Bảng 20: Bảng đặc tả Use case xem thông tin cá nhân ... 30

Bảng 21: Bảng đặc tả Use case chỉnh sửa thông tin cá nhân ... 31

Bảng 22: Bảng đặc tả Use case thay đổi mật khẩu ... 32

Bảng 23: Bảng đặc tả Use case quên mật khẩu ... 33

Bảng 24: Bảng đặc tả Use case xem đơn hàng đã đặt ... 34

Bảng 25: Bảng đặc tả Use case đánh giá sản phẩm sau khi mua ... 34

Bảng 26: Bảng đặc tả Use case xem danh mục sản phẩm ... 35

Bảng 27: Bảng đặc tả Use case thêm danh mục sản phẩm... 36

Bảng 28: Bảng đặc tả Use case chỉnh sửa danh mục ... 37

Bảng 29: Bảng đặc tả Use case thêm sản phẩm ... 37

Bảng 30: Bảng đặc tả Use case chỉnh sửa sản phẩm ... 38

Bảng 31: Bảng đặc tả Use case đặt hàng ... 39

Bảng 32: Bảng đặc tả Use case xem doanh thu ... 40

Bảng 33: Bảng đặc tả Use case thêm địa chỉ ... 40

Bảng 34: Bảng đặc tả Use case chỉnh sửa địa chỉ ... 41

Bảng 35: Bảng đặc tả Use case xoá địa chỉ ... 42

Bảng 36: Bảng đặc tả Use case xem đơn hàng của người dùng ... 43

Bảng 37: Bảng đặc tả Use case chuyển trạng thái sản phẩm ... 43

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>PHẦN MỞ ĐẦU </b>

Cùng với sự phát triển của Internet, các ứng dụng và trang web trực tuyến cung cấp các sản phẩm sách cho người đọc ngày càng phổ biến. Việc đáp ứng được đúng nhu cầu đọc sách cũng như cung cấp cho người dùng một trang web trực quan cũng như những đầu sách phù hợp với người dùng là một vấn đề nan giải.

Xuất phát từ những nhu cầu thực tiễn ấy, với mong muốn mở rộng thị trường cho các nhà xuất bản và tác giả, giảm thời gian và tiết kiệm chi phí tìm kiếm cho người dùng cũng như luôn cập nhật thông tin liên tục các đầu sách cho người dùng, nhóm quyết định chọn đề tài “Xây dựng trang web bán sách”

Đề tài “Xây dựng trang web bán sách” hướng đến các mục tiêu sau:

- Xây dựng website cung cấp các thông tin về các sản phẩm về sách, bao gồm các chức năng tìm kiếm, xem thơng tin, đặt hàng và thanh tốn, đồng thời đánh giá các sản phẩm đã mua

- Xây dựng hệ thống quản lý và doanh thu cho người quản lý - Giao diện thân thiện với người dùng ở mọi lứa tuổi

<b>3. ĐỐI TƯỢNG NGHIÊN CỨU </b>

Phần nghiên cứu nghiệp vụ nhóm đã tiến hành khảo sát các trang web thương mại điện tử kinh doanh các sản phẩm về sách, văn phòng phẩm như: TIKI, Phương Nam, Fahasa, bookbuy,…tìm hiểu nhu cầu của người dùng và cả doanh nghiệp.

Phần back-end sử dụng Gin framework của ngôn ngữ Golang, xây dựng API và thao tác với dữ liệu một cách chính xác và nhanh chóng. Ứng dụng Elasticsearch để thực hiện thao tác tìm kiếm tối ưu nhất.

Phần front-end sử dụng React.JS của ngôn ngữ Javascript để thiết kế giao diện cho end-user

Phần bảo mật hệ thống, tiến hành nghiên cứu PASETO: Platform-Agnostic Security Tokens của Golang để bảo mật cho hệ thống.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>4. PHẠM VI NGHIÊN CỨU </b>

Áp dụng các kiến thức đã được học và nghiên cứu thêm các kiến thức mới về bảo mật cũng như các framework để xử lý các chức năng cơ bản.

<b>5. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN </b>

Sau khi hoàn thành đề tài, nhóm đã có thêm kinh nghiệm về việc thiết kế ứng dụng mua bán, quản lý sản phẩm thương mại điện tử

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

Nguồn tham khảo: TopDev – “Golang là gì và tại sao bạn nên học Go?” Link: Gin framework </b>

Gin là một framework phát triển ứng dụng web dựa trên ngôn ngữ lập trình Go (Golang). Được thiết kế để đơn giản hóa việc xây dựng các ứng dụng web nhanh chóng, hiệu quả. Gin cung cấp các tính năng như routing, middleware, xử lý JSON, xử lý lỗi, và nhiều công cụ hỗ trợ phát triển khác. Một trong những ưu điểm lớn của GIN là hiệu suất cao, vì được viết bằng Go, một ngơn ngữ lập trình được tối ưu hóa cho hiệu suất xử lý. Gin sử dụng cấu trúc router nhanh và cơ chế pooling để quản lý các goroutine giúp xử lý các yêu cầu một cách hiệu quả. Bên cạnh đó, Gin cũng hỗ trợ việc xây dựng các ứng dụng web Restful thông qua việc hỗ trợ các HTTP methods như GET, POST, PUT, DELETE,.... Đồng thời cung cấp các cơ chế xử lý lỗi, xác thực và phân quyền để giúp xây dựng các ứng dụng web an toàn và hiệu năng cao. Nhìn chung, Gin là một lựa chọn khá tốt cho việc phát triển ứng dụng web trong Go.

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

Nguồn tham khảo: sinhnx.dev – “BẮT ĐẦU VỚI GIN-GONIC FRAMEWORK” Link: ReactJS </b>

ReactJS là một thư viện JavaScript được thiết kế bởi Facebook, được sử dụng để xây dựng giao diện người dùng (UI) cho các ứng dụng web. ReactJS giúp cho việc thiết kế trang web mượt mà và nhanh, khả năng mở rộng cao. React sử dụng cơ chế "Component-Based Architecture" (kiến trúc dựa trên thành phần) để phân chia giao diện thành các thành phần độc lập, có thể tái sử dụng và quản lý từng trạng thái riêng. Mỗi thành phần trong ReactJS có thể được xây dựng bằng JSX, một phần mở rộng của JavaScript cho phép viết mã HTML trong JavaScript.

ReactJS sử dụng Virtual DOM (DOM ảo) để cải thiện hiệu suất và tối ưu hóa q trình cập nhật giao diện. Thay vì cập nhật tồn bộ DOM khi có thay đổi, ReactJS chỉ cập nhật những phần thay đổi trong DOM ảo, sau đó áp dụng các thay đổi đó lên DOM thực tế, giúp tăng tốc độ hiển thị giao diện và cải thiện trải nghiệm người dùng.

Nguồn tham khảo: TopDev – “ReactJS – Những điều bạn cần phải biết” Link: PostgreSQL </b>

Là một hệ quản trị cơ sở dữ liệu quan hệ, PostgreSQL cung cấp mơ hình dữ liệu quan hệ, trong đó dữ liệu được tổ chức thành các bảng, các mối quan hệ giữa các bảng được xác định thông qua các khóa ngoại và các truy vấn SQL được sử dụng để truy xuất và thao tác dữ liệu. Ngoài ra, PostgreSQL cũng hỗ trợ các tính năng mở rộng khác như file JSON. PostgreSQL được ứng dụng nhiều trong các dự án phát triển phần mềm, web và hệ thống thơng tin do tính bảo mật, độ tin cậy cao và khả năng mở rộng tốt của nó.

Nguồn tham khảo: FPT Cloud – “PostgreSQL là gì? Tìm hiểu về hệ quản trị cơ sở dữ liệu PostgreSQL”

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>1.5. ELK Stack (Elasticsearch, Logstash, Kibana) </b>

ELK Stack là một tập hợp 3 phần mềm, phục vụ cho việc logging, tìm kiếm. Ba phần mềm lần lượt là:

Elasticsearch: là một cơ sở dữ liệu để tìm kiếm, lưu trữ và query dữ liệu, có khả năng tìm kiếm nhanh chóng (near real time) thơng qua giao thức RESTful. Dễ dàng tích hợp vào hệ thống hiện có để phục vụ riêng cho việc tìm kiếm.

Logstash: là công cụ thu thập dữ liệu từ các nguồn khác nhau, chuyển đổi dữ liệu và gửi đến điểm đích theo ý muốn.

Kibana: Giao diện để quản lý, thống kê dữ liệu, đọc thông tin từ Elasticsearch

<b>1.6. Content – Based Recommendation System </b>

Là một trong những thuật toán cơ bản của hệ thống gợi ý. Hệ thống sẽ tìm và gợi ý những sản phẩm có độ tương đồng nhất định với những sản phẩm đã được sử dụng trước đó. Ví dụ khi người dùng mua sách có thể loại Trinh thám, hệ thống sẽ gợi ý những quyển sách tương tự thể loại Trinh thám. Ưu điểm của thuật toán này là hoạt động tốt với những hệ thống có độ phức tạp dữ liệu thấp.

<b>2. Một số thư viện và ứng dụng hỗ trợ khác 2.1. Phía front end </b>

Với Redux, các thành phần trong ứng dụng có thể truy cập và cập nhật trạng thái một cách dễ dàng, đồng thời giúp cho mã nguồn gọn nhẹ, dễ bảo trì, tạo điều kiện cho việc phát triển ứng dụng có cấu trúc rõ ràng.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>2.2. Phía back end 2.2.1. PASETO Token </b>

PASETO (Platform-Agnostic Security Tokens) là một chuẩn mã hóa token an tồn được sử dụng để xác thực và phân quyền trong các ứng dụng web ,tương tự như JWT - JSON Web Tokens nhưng khác ở một số điểm sau:

- Thuật toán mã hoá: PASETO sử dụng các thuật toán mã hóa hiện đại như AES-256 và HMAC-SHA384 để đảm bảo tính bảo mật. Trong khi đó, JWT sử dụng các thuật tốn mã hóa đối xứng (symmetric encryption) hoặc mã hóa bất đối xứng (asymmetric encryption) như RSA

- Độ tin cậy: PASETO tập trung vào tính tồn vẹn dữ liệu và bảo mật thơng tin, trong khi JWT tập trung vào việc chứng thực (authentication) và phân quyền (authorization). Điều này giúp PASETO đảm bảo rằng dữ liệu không bị thay đổi trong quá trình truyền tải, trong khi JWT chỉ xác thực nguồn gốc và quyền truy cập của người dùng

- Cấu trúc token : PASETO sử dụng một chuỗi JSON trực tiếp (direct JSON) để lưu trữ thông tin, trong khi JWT sử dụng một chuỗi JSON được mã hóa Base64 - Độ tương thích cao: PASETO cung cấp các phiên bản (versions) để hỗ trợ các tính năng và cấu trúc khác nhau. Mỗi phiên bản đảm bảo tính tương thích ngược với các phiên bản trước đó, giúp đảm bảo rằng các token đã tạo ra có thể được đọc và xác thực trong tương lai. JWT khơng có khái niệm về phiên bản và khơng đảm bảo tính tương thích ngược.

Điểm khác biệt quan trọng của PASETO so với JWT là PASETO khơng sử dụng các thuật tốn mã hóa đối xứng (symmetric encryption), mà chỉ sử dụng các thuật toán chứng thực (authentication) và chữ ký số (digital signatures). Điều này giúp tránh các lỗ hổng bảo mật có thể xảy ra trong JWT khi sử dụng thuật tốn mã hóa đối xứng.

Nguồn tham khảo: Viblo – “PASETO - một lựa chọn đáng cân nhắc cho bài toán Token Based Authentication” (Trần Văn Tùng – 16/04/2020)

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>a/p/paseto-mot-lua-chon-dang-can-nhac-cho-bai-toan-2.2.2. Docker </b>

Docker là một nền tảng sử dụng cho việc tạo, triển khai và chạy các ứng dụng trong một môi trường độc lập và cô lập gọi là container. Container là một đơn vị phần mềm chứa tất cả những gì cần thiết để chạy một ứng dụng, bao gồm mã nguồn, các thư viện, hệ điều hành và cấu hình. Docker cho phép đóng gói ứng dụng và các thành phần liên quan vào một container duy nhất, đảm bảo tính nhất quán. Container có thể chạy trên bất kỳ máy tính hoặc máy chủ nào hỗ trợ Docker, mà không cần quan tâm đến mơi trường hoặc cấu hình của máy tính đó.

Nguồn tham khảo: TopDev – “Docker là gì? Tìm hiểu về Docker” Link: Redis </b>

Redis là một hệ thống cơ sở dữ liệu key-value, thường được sử dụng để lưu trữ dữ liệu tạm thời, caching, và quản lý các cấu trúc dữ liệu phức tạp như lists, sets, hashes, sorted sets và các chuỗi strings.

<b>CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ ĐẶC TẢ YÊU CẦU PHẦN MỀM </b>

<b>2.1. Khảo sát hiện trạng </b>

<b>2.1.1. Nhà sách trực tuyến Fahasa.com - FAHASA.COM: </b>

Website:

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

Hình 1: Trang web FAHASA

<small>● </small> Giao diện thân thiện, dễ dàng sử dụng

<small>● </small> Hỗ trợ thanh tốn trực tuyến

<small>● </small> Quy trình đặt hàng và thanh tốn dễ dàng khơng cần đăng nhập

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

Hình 2: Trang web Bookbuy

<small>● </small> Giao diện thân thiện, dễ dàng sử dụng

<small>● </small> Quy trình đặt hàng và thanh tốn dễ dàng khơng cần đăng nhập

<small>● </small> Hỗ trợ thanh toán trực tuyến

<small>● </small> Có thể xem nhanh mơ tả từ trang chủ khi giữ chuột trên sản phẩm

<small>● </small> Có sản phẩm đã xem

<b>Nhược điểm: </b>

<small>● </small> Tốc độ tải trang không nhanh

<b>2.1.3. Phuong Nam Book: </b>

Website:

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

Nếu có nhu cầu mua và tìm kiếm sách và tài liệu thì đây là trang web có thể đáp ứng được. Tại website này, người dùng có thể tìm kiếm các loại sách từ những năm 2010 trở xuống

Hình 3: Trang web Phương Nam

<small>● </small> Giao diện thân thiện, dễ dàng sử dụng

<small>● </small> Quy trình đặt hàng và thanh tốn dễ dàng không cần đăng nhập

<b>Nhược điểm: </b>

<small>● </small> Không hỗ trợ thanh toán trực tuyến

<small>● </small> Mức độ đa dạng sản phẩm thấp

<small>● </small> Khơng có sản phẩm đã xem Tốc độ tải trang không nhanh

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<small>● </small> Giao diện thân thiện, đẹp, dễ dàng sử dụng

<small>● </small> Hỗ trợ thanh toán trực tuyến

<small>● </small> Tốc độ tải trang và phản hồi nhanh

<small>● </small> Số lượng sản phẩm đa dạng

<b>Nhược điểm: </b>

<small>● </small> <b>Khơng có sản phẩm đã xem </b>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>2.2. Kiến trúc chung của hệ thống </b>

<b>Hình 5: Kiến trúc chung của hệ thống </b>

Ứng dụng được xây dựng nhằm tạo ra một nền tảng phục vụ cho cá nhân hoặc doanh nghiệp nhỏ có nhu cầu kinh doanh và quảng bá các sản phẩm về sách, đồng thời cung cấp các tính năng giúp cho trải nghiệm mua sách thuận tiện với nhiều đầu sách và giá thành khác nhau.

<b>2.4.1. Thông tin đề tài và công nghệ sử dụng </b>

- Tên ứng dụng: Xây dựng nhà sách online - Backend: Gin framework

- Frontend: ReactJS, Redux

- Database: PostgreSQL, Redis, ELK Stack, Python

<b>2.4.2.1. Yêu cầu chức năng nghiệp vụ </b>

Bộ phận sử dụng:

<b>STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú </b>

1 Tìm kiếm sản phẩm theo tên hoặc danh mục

Tra cứu

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

2 Xem danh sách tất cả sản phẩm Tra cứu 3 Xem thông tin chi tiết sản phẩm Tra cứu 4 Xem giỏ hàng Tra cứu 5 Xem mục sản phẩm yêu thích Tra cứu 6 Xem đơn hàng Tra cứu 7 Thêm, sửa, xóa sản phẩm trong giỏ

Bảng 1: Bảng mô tả yêu cầu chức năng của hệ thống phía user Bộ phận quản trị

<b>STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú </b>

1 Tìm kiếm sản phẩm theo tên hoặc danh mục

Tra cứu

2 Xem danh sách sản phẩm Tra cứu 3 Xem thông tin chi tiết sản phẩm Tra cứu 4 Thêm, sửa, xố thơng tin sản phẩm Lưu trữ 5 Thêm, sửa, xoá danh mục Lưu trữ 6 Xem đánh giá Tra cứu 7 Xoá đánh giá Lưu trữ

Bảng 2: Bảng mô tả yêu cầu chức năng của hệ thống phía admin

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>2.4.2.2. Yêu cầu chức năng hệ thống </b>

1 Chức năng phân quyền Phân quyền phía quản trị gồm có admin. Phía người dùng gồm có guest và user

2 Chức năng xác thực Xác thực phía người dùng thơng qua email 3 Chức năng khôi phục mật khẩu Khôi phục thông qua gửi

đường dẫn xác thực qua email

4 Chức năng thanh toán trực tuyến Thanh toán trực tuyến thông qua Stripe và Paypal

Bảng 3: Bảng mô tả yêu cầu chức năng của hệ thống

1 Giao diện thân thiện với người dùng Tính tiện dụng 2 Tốc độ xử lý và tìm kiếm nhanh

4 Dễ dàng mở rộng quy mô Tính tiến hóa

Bảng 4: Bảng mơ tả u cầu phi chức năng

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG</b>

<b>3.1. Tác nhân hệ thống </b>

Hệ thống website kinh doanh sách gồm 3 actor: Admin (Admin), User (người dùng) và Guest (người dùng vãng lai)

- Admin: là người quản lý trang web thông qua xem thống kê của website, quản lý danh mục sản phẩm, quản lý sản phẩm, xem thông tin người dùng, xem thơng tin đơn hàng. Qua đó giúp cho admin có cái nhìn tổng quan về tình hình kinh doanh của website.

- User: là người dùng đã đăng ký với hệ thống, có thể tìm kiếm, xem sản phẩm, xem danh mục sản phẩm, tìm kiếm sản phẩm theo danh mục, quản lý giỏ hàng, quản lý danh sách sản phẩm yêu thích, đồng thời đặt hàng và thanh toán đơn hàng. Đánh giá các sản phẩm đã mua thành công.

- Guest: là người dùng chưa đăng ký với hệ thống, có thể tìm kiếm và xem sản phẩm của trang web mà khơng cần phải xác thực. Nếu có nhu cầu mua hàng và trải nghiệm thêm nhiều tính năng, guest có thể đăng ký để sử dụng dịch vụ của trang web.

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

<b>3.2.1. Lược đồ Use case phía người dùng </b>

<b>Hình 6: Lược đồ Use case phía người dùng </b>

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

<b>3.2.2. Lược đồ Use case phía admin </b>

<b>Hình 7: Lược đồ Use case phía admin </b>

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

<b>3.2.3. Mô tả use case của hệ thống </b>

User Đăng nhập Người dùng sử dụng tên đăng nhập và mật khẩu đã đăng ký để đăng nhập. Hệ thống đối chiếu thông tin để xác thực người dùng.

Tra cứu sản phẩm

Người dùng chọn sản phẩm để xem thông tin chi tiết của sản phẩm

Xem giỏ hàng Người dùng chọn biểu tượng giỏ hàng để xem các sản phẩm có trong giỏ hàng

Xem danh sách sản phẩm yêu thích

Người dùng chọn biểu tượng yêu thích để xem các sản phẩm đã lưu trong danh sách sản phẩm yêu thích

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

Người dùng thêm sản phẩm muốn mua vào giỏ hàng bằng cách nhấn vào nút “Add to cart” tại trang chi tiết của sản phẩm

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

Người dùng thêm sản phẩm vào mục sản phẩm yêu thích bằng cách nhấn vào nút “Add to wishlist” tại trang chi tiết của sản phẩm

Quản lý giỏ hàng

Người dùng có thể chỉnh sửa số lượng sản phẩm hoặc xoá sản phẩm ra khỏi giỏ hàng

Quản lý sản phẩm u thích

Người dùng có thể xố sản phẩm ra khỏi mục yêu thích hoặc thêm sản phẩm vào giỏ hàng

Thanh toán Sau khi chọn thanh toán đơn hàng, người dùng sẽ thanh toán đơn hàng thơng qua hình thức thanh tốn online, sau khi thanh tốn sẽ có thơng báo thể hiện trạng thái thanh toán

Xem đơn hàng đã đặt

Người dùng có thể xem lại đơn hàng đặt

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

Tìm kiếm Người dùng có thể tìm kiếm sản phẩm thơng qua thanh tìm kiếm hoặc thơng qua các danh mục Đăng xuất Người dùng chọn nút “Log out” để đăng xuất thông

tin tài khoản

Đánh giá Sau khi mua sản phẩm, người dùng có thể đánh giá sản phẩm thơng qua rating và bình luận.

Quản lý địa chỉ Người dùng có thể thêm, sửa, xoá địa chỉ giao hàng Quên mật khẩu Người dùng quên mật khẩu có thể tạo mật khẩu mới

thông qua xác thực email

Guest Xem trang chủ Guest có thể xem trang chủ mà không cần đăng nhập hay đăng ký tài khoản

Tra cứu sản phẩm

Guest chọn sản phẩm để xem thông tin chi tiết của sản phẩm

Tìm kiếm Guest có thể tìm kiếm sản phẩm thơng qua thanh tìm kiếm hoặc thông qua các danh mục sản phẩm Đăng ký Guest muốn đăng ký thành User cần nhập các thông

tin sau:

- Username (không trùng với tên user nào khác)

- Email cá nhân - Mật khẩu

Admin Xem doanh thu Admin có thể xem được doanh thu theo thời gian của trang web

Quản lý sản phẩm

Admin có thể quản lý sản phẩm với các chức năng thêm sửa xoá thông tin sản phẩm

Xem sản phẩm Admin xem được list các sản phẩm có trong trang web

Đăng nhập Admin sử dụng tên đăng nhập và mật khẩu đã được cấp để đăng nhập

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

Đăng xuất Admin có thể đăng xuất thơng tin bằng cách chọn nút “Log out”

Quản lý danh mục

Admin có thể quản lý sản phẩm với các chức năng thêm sửa xố thơng tin danh mục

Xem đơn hàng người dùng

Admin có thể xem chi tiết thông tin các đơn hàng mà người dùng đã đặt

Bảng 5: Bảng mô tả Use case của hệ thống

Use case Đăng ký

Short Description Guest cần tạo tài khoản để đăng nhập và sử dụng các dịch vụ của website

Main Flow (1) Người dùng truy cập vào website

(2) Người dùng chọn vào mục Sign In/Sign up (3) Người dùng chọn Sign up

(4) Người dùng điền thông tin yêu cầu đầy đủ

(5) Người dùng chọn Register để xác nhận tạo tài khoản [A1] [E1]

(6) Hệ thống hiển thị thông báo đăng ký tài khoản thành công

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

(7) Chuyển hướng đến trang đăng nhập

Alternate Flow (A1) Guest huỷ đăng ký tài khoản và kết thúc quá trình đăng ký

Exception Flow (E1) Nếu tài khoản email hoặc tên tài khoản đã tồn tại trong hệ thống thì quay lại bước (3)

Bảng 6: Bảng đặc tả Use case đăng ký

Use case Đăng nhập

Short Description Người dùng đăng nhập thông qua tài khoản đã đăng ký với hệ thống

Actors User

Pre-Conditions Thông tin của người dùng phải tồn tại trong website Post Conditions Người dùng đăng nhập thành công vào website

Main Flow (1) Người dùng truy cập vào website

(2) Người dùng chọn vào mục Sign In/Sign up (3) Người dùng điền thông tin đăng nhập (4) Người dùng nhấn chọn Sign in

(5) Hệ thống xác thực thông tin đăng nhập [E1]

(5) Hệ thống hiển thị thông báo đăng nhập thành công (6) Chuyển hướng đến trang chủ [A1]

Alternate Flow (A1) Hệ thống điều hướng tài khoản sang trang admin nếu tài khoản đăng nhập là admin

Exception Flow (E1) Nếu tài khoản hoặc mật khẩu khơng hợp lệ thì quay lại bước (3)

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

Use case Đăng xuất

Short Description Người dùng đăng xuất, xoá phiên đăng nhập hiện tại

Actors Admin, User

Pre-Conditions Người dùng đã đăng nhập thành công vào website Post Conditions Người dùng đăng xuất thành cơng

Main Flow (1) Người dùng nhấn vào hình ảnh đại diện trên thanh Header

(2) Người dùng chọn vào mục Log out (3) Hệ thống hiển thị thông báo Log out

(4) Hệ thống điều hướng người dùng đến trang đăng nhập [A1]

Alternate Flow (A1) Hệ thống không điều hướng người dùng nếu người dùng đang tại các trang Home, Search

Exception Flow

Use case Xem sản phẩm

Short Description Người dùng có thể xem các sản phẩm của website

Actors Admin, User, Guest

Pre-Conditions Người dùng đã truy cập vào website

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

Post Conditions Người dùng có thể xem các sản phẩm có trên website Main Flow (1) Chọn vào danh mục sản phẩm cần xem với quyền User

hoặc chưa đăng nhập

(2) Hệ thống hiển thị thông tin danh sách các sản phẩm tương ứng

Alternate Flow Exception Flow

Use case Xem chi tiết sản phẩm

Short Description Người dùng có thể xem thông tin chi tiết của một sản phẩm bất kỳ có trên website

Actors Admin, User, Guest Pre-Conditions

Post Conditions Người dùng có thể xem thơng tin chi tiết của một sản phẩm bất kỳ có trên website

Main Flow (1) Chọn vào sản phẩm cần xem thông tin chi tiết (2) Hệ thống hiển thị thông tin chi tiết của sản phẩm Alternate Flow

Exception Flow

Use case Tìm kiếm sản phẩm

Short Description Người dùng tìm kiếm sản phẩm thơng qua thanh tìm kiếm

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

Actors Admin, User, Guest

Pre-Conditions Người dùng đã truy cập vào website

Post Conditions Người dùng có thể tìm thấy thơng tin của sản phẩm cần tìm Main Flow

(1) Người dùng nhấp chọn vào thanh tìm kiếm(2) Người dùng nhập thơng tin muốn tìm kiếm [A1](3) Người dùng nhấn biểu tượng tìm kiếm

(4) Hệ thống hiển thị danh sách các sản phẩm tìm được thơng qua từ khóa người dùng vừa nhập [E1]

Alternate Flow (A1) Người dùng nhấp chọn ngồi khu vực thanh tìm kiếm và quay lại bước (1)

Exception Flow (E1) Người dùng nhập thông tin sản phẩm khơng có trong hệ thống, hiển thị thơng báo khơng có sản phẩm.

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

Short Description Người dùng có thể thêm sản phẩm vào giỏ hàng Actors Admin, User

Pre-Conditions Người dùng đã đăng nhập vào website

Post Conditions Sản phẩm được thêm vào giỏ hàng thành công Main Flow (1) Người dùng chọn vào sản phẩm mong muốn

(2) Hệ thống điều hướng đến trang thông tin chi tiết của sản phẩm

(3) Người dùng nhấp chọn số lượng sản phẩm mong muốn(4) Người dùng nhấp chọn “Add to cart”

</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">

(5) Hệ thống thực hiện thêm sản phẩm vào giỏ hàng với số lượng tương ứng

(6) Hệ thống hiển thị thông báo thêm sản phẩm vào giỏ thành công

Alternate Flow Exception Flow

<b>3.3.8. Chỉnh sửa số lượng sản phẩm trong giỏ hàng </b>

Use case Chỉnh sửa số lượng sản phẩm có trong giỏ hàng

Short Description Người dùng có thể chỉnh sửa số lượng sản phẩm vào giỏ hàng

Actors Admin, User

Pre-Conditions Người dùng đã đăng nhập vào website. Có ít nhất 1 sản phẩm trong giỏ hàng

Post Conditions Số lượng sản phẩm trong giỏ hàng được chỉnh sửa thành công

Main Flow (1) Người dùng nhấp chọn biểu tượng giỏ hàng

(2) Hệ thống điều hướng đến trang chi tiết giỏ hàng của người dùng

(3) Hệ thống hiển thị danh sách sản phẩm trong giỏ hàng (4) Người dùng thực hiện chỉnh sửa số lượng sản phẩm trong giỏ hàng

(5) Hệ thống thực hiện lưu thông tin giỏ hàngAlternate Flow

Exception Flow

<b>Bảng 13: Bảng đặc tả Use case chỉnh sửa số lượng sản phẩm trong giỏ hàng </b>

</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">

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

Short Description Người dùng có thể xóa sản phẩm khỏi giỏ hàng Actors Admin, User

Pre-Conditions Người dùng đã đăng nhập vào website.

Người dùng có ít nhất 1 sản phẩm trong giỏ hàng Post Conditions Sản phẩm được xóa khỏi giỏ hàng thành cơng

Main Flow (1) Người dùng nhấp chọn biểu tượng giỏ hàng

(2) Hệ thống điều hướng đến trang chi tiết giỏ hàng của người dùng

(3) Hệ thống hiển thị danh sách sản phẩm trong giỏ hàng (4) Người dùng thực hiện xóa sản phẩm mong muốn(5) Người dùng chọn xác nhận xóa sản phẩm [A1] (6) Hệ thống thực hiện xóa sản phẩm khỏi giỏ hàng Alternate Flow (A1) Người dùng chọn huỷ và quay lại bước 2 Exception Flow

Use case Xem sản phẩm trong giỏ hàng

Short Description Người dùng có thể xem sản phẩm trong giỏ hàng Actors Admin, User

Pre-Conditions Người dùng đã đăng nhập vào website.

Post Conditions Người dùng có thể xem sản phẩm trong giỏ hàng Main Flow (1) Người dùng nhấp chọn biểu tượng giỏ hàng

(2) Hệ thống điều hướng đến trang chi tiết giỏ hàng của người dùng

</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">

(3) Hệ thống hiển thị danh sách sản phẩm trong giỏ hàng [E1]

Alternate Flow

Exception Flow Nếu khơng có sản phẩm nào trong giỏ hàng, hiển thị thơng báo khơng có sản phẩm trong giỏ hàng

<b>Bảng 15: Bảng đặc tả Use case xem thông tin giỏ hàng </b>

<b>3.3.11. Xem sản phẩm trong mục sản phẩm yêu thích </b>

Use case Xem sản phẩm trong mục sản phẩm yêu thích