Xây dựng website cộng đồng chia sẻ trải nghiệm du lịch và điểm đến

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

Hiện nay, mạng xã hội rất phổ biến không chỉ trên thế giới mà còn ở Việt Nam

Ngày nay, các doanh nghiệp đang tận dụng mạng xã hội để quảng bá sản phẩm và dịch vụ, đồng thời nâng cao nhận diện thương hiệu Đặc biệt, nhiều công ty trong ngành du lịch đã khai thác hiệu quả nguồn tài nguyên này để tiếp cận gần gũi hơn với khách du lịch.

Theo tổ chức Diễn đàn Kinh tế thế giới (WEF), ngành du lịch đã chịu ảnh hưởng nặng nề trong năm 2020 do đại dịch Covid-19 Nhằm hỗ trợ mọi người tiếp cận thông tin đáng tin cậy về các địa điểm du lịch và tăng cường kết nối qua mạng xã hội, nhóm chúng tôi đã quyết định phát triển tiểu luận chuyên ngành với chủ đề: “XÂY DỰNG WEBSITE CỘNG ĐỒNG CHIA SẺ TRẢI NGHIỆM DU LỊCH VÀ ĐIỂM ĐẾN”.

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

PHÍA NGƯỜI DÙNG

Người dùng có thể thực hiện các chức năng:

- Đăng kí, đăng nhập với tài khoản email, mật khẩu

- Xem các bài post chia sẻ, bài post hỏi đáp

- Tuỳ chọn tìm kiếm bài viết, bạn bè, địa điểm du lịch,

- Tương tác với các bài viết: lượt tương tác, bình luận

- Quản lí trang cá nhân, hình ảnh, bạn bè

- Tìm kiếm khám phá địa điểm, tổng hợp hiển thị thông tin các bài viết chia sẻ dựa trên hashtag, đóng góp địa điểm phát triển cộng đồng

- Tạo một cuộc hành trình và tìm kiếm người đồng hành.

PHÍA QUẢN TRỊ VIÊN

Quản trị viên có thể thực hiện các chức năng:

- Quản lý người dùng, tài khoản

- Quản lý các địa điểm trong hệ thống, các bài đóng góp địa điểm

- Thống kê báo cáo các hoạt động của trang web.

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Sau khi hoàn thiện đề tài, nhóm chúng em sẽ nâng cao kỹ năng và kiến thức về công nghệ mới, đồng thời khuyến khích tinh thần nghiên cứu và sáng tạo cống hiến cho cộng đồng Khi đề tài được áp dụng, mạng xã hội du lịch sẽ trở nên phổ biến hơn, tiếp cận đa dạng lứa tuổi và góp phần phát triển ngành du lịch hậu Covid-19.

Từ đó, có thể quảng bá, xây dựng hình ảnh du lịch ở khắp mọi nơi trên thế giới dựa trên chính hình ảnh mà người dùng đã đóng góp

CƠ SỞ LÝ THUYẾT

CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT – END

1.1.4 Một vài thư viện hỗ trợ khác

CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK – END

2 Chương 2: KHẢO SÁT HIỆN TRẠNG

2.3 Kiến trúc chung của hệ thống

3 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3.1 Mô hình hóa yêu cầu

3.1.2 Mô tả chi tiết Use case

3.4 Thiết kế cơ sở dữ liệu

4 CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ

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

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

LỜI CẢM ƠN 1 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 2

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

4.MỤC TIÊU CỦA ĐỀ TÀI 15

5.Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 15

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 16

1.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT – END 16

1.1.4 Một vài thư viện hỗ trợ khác 18

1.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK – END 18

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 23

2.1.1 “HAHALOLO – MẠNG XÃ HỘI DU LỊCH TOÀN CẦU” 23

2.1.2 “GODY.VN ĐI & KHÁM PHÁ THEO CÁCH CỦA BẠN” 24

2.1.3 “GAFFL FIND A TRAVEL BUDDY, PLAN TRIPS AND TRAVEL TOGETHER” 25

2.1.4 “COUCHSURFING: MEET AND STAY WITH LOCALS ALL

2.2.2 Yêu cầu phi chức năng 28

2.3 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 29

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 30

3.1 MÔ HÌNH HÓA YÊU CẦU 30

3.1.2 Mô tả chi tiết Use case 33

3.3.3 Chức năng “Điền thông tin cho lần đăng nhập đầu tiên” 63

3.3.4 Chức năng “Thay đổi cảm xúc bài đăng” 64

3.3.5 Chức năng “Thay đổi trạng thái bạn bè” 65

3.3.6 Chức năng “Tạo bình luận” 66

3.3.7 Chức năng “Tạo bài đăng” 67

3.3.8 Chức năng “Xóa bình luận” 68

3.3.9 Chức năng “Xóa bài đăng” 69

3.3.11.Chức năng “Quên mật khẩu” 71

3.3.12.Chức năng “Tìm kiếm bài đăng, địa điểm, người dùng” 72

3.3.13.Chức năng “Gửi tin nhắn” 73

3.3.14.Chức năng “Cập nhật bình luận” 74

3.3.15.Chức năng “Cập nhật thông tin cá nhân” 75

3.3.16.Chức năng “Cập nhật mật khẩu” 76

3.3.17.Chức năng “Cập nhật bài đăng” 77

3.3.18.Chức năng “Gợi ý kết bạn” 78

3.3.19.Chức năng “Đóng góp địa điểm du lịch” 79

3.3.20.Chức năng “Tạo hành trình mới” 80

3.3.21.Chức năng “Xóa hành trình” 81

3.3.22.Chức năng “Gửi yêu cầu tham gia hành trình” 82

3.3.23.Chức năng “Cập nhật thông tin hành trình” 83

3.3.24.Chức năng “Cập nhật trạng thái yêu cầu tham gia hành trình” 84

3.3.25.Chức năng “Quản trị viên – Tạo khu vực” 85

3.3.26.Chức năng “Quản trị viên – Tạo loại địa điểm mới” 86

3.3.27.Chức năng “Quản trị viên – Tạo địa điểm mới” 87

3.3.28.Chức năng “Quản trị viên – Tạo quản trị viên” 88

3.3.29.Chức năng “Quản trị viên – Cập nhật loại địa điểm” 89

3.3.30.Chức năng “Quản trị viên – Cập nhật địa điểm” 90

3.3.31.Chức năng “Quản trị viên – Cập nhật trạng thái đóng góp” 91

3.4 THIẾT KẾ CƠ SỞ DỮ LIỆU 92

1.4.1 Lược đồ thực thể kết hợp (ERD) 92

3.4.2 Mô tả chi tiết bảng dữ liệu 92

1.5.1 Màn hình giao diện phía Người dùng ẩn danh và Người dùng 103

1.5.2 Màn hình giao diện phía Quản trị viên 142

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 153

Hình 5 Accessing AWS credentials through a user pool with an identity pool 21

Hình 6 Website "Hahalolo - mạng xã hội du lịch toàn cầu" 23

Hình 7 Website "Gody.vn đi & khám phá theo cách của bạn" 24

Hình 8 Website "Gaffl find a travel buddy, plan trips and travel together" 25

Hình 9 Website "Couchsurfing: Meet and stay with locals all over the world" 26

Hình 10 Website "Tripgiraffe: Go explore together" 27

Hình 11 Kiến trúc chung của hệ thống sử dụng React & Spring Boot 29

Hình 12 Use cases phía Người dùng 30

Hình 13 Chi tiết use cases phía Người dùng 31

Hình 14 Use cases phía Quản trị viên 32

Hình 15 Chi tiết use cases phía Quản trị viên 33

Hình 19 Sequence "Điền thông tin cho lần đăng nhập đầu tiên" 63

Hình 20 Sequence "Thay đổi cảm xúc bài đăng" 64

Hình 21 Sequence "Thay đổi trạng thái bạn bè" 65

Hình 23 Sequence "Tạo bình luận" 66

Hình 24 Sequence "Tạo bài đăng" 67

Hình 25 Sequence "Xóa bình luận" 68

Hình 26 Sequence "Xóa bài đăng" 69

Hình 28 Sequence "Quên mật khẩu" 71

Hình 29 Sequence "Tìm kiếm bài đăng, địa điểm, người dùng" 72

Hình 30 Sequence "Gửi tin nhắn" 73

Hình 32 Sequence "Cập nhật bình luận" 74

Hình 33 Sequence "Cập nhật thông tin cá nhân" 75

Hình 34 Sequence "Cập nhật mật khẩu" 76

Hình 35 Sequence "Cập nhật bài đăng" 77

Hình 39 Sequence "Gợi ý kết bạn" 78

Hình 41 Sequence "Đóng góp địa điểm du lịch" 79

Hình 42 Sequence "Tạo hành trình mới" 80

Hình 43 Sequence "Xóa hành trình" 81

Hình 44 Sequence "Gửi yêu cầu tham gia hành trình" 82

Hình 45 Sequence "Cập nhật thông tin hành trình" 83

Hình 46 Sequence "Cập nhật trạng thái yêu cầu tham gia hành trình" 84

Hình 50 Sequence "Quản trị viên - tạo khu vực" 85

Hình 51 Sequence "Quản trị viên - Tạo loại địa điểm mới" 86

Hình 52 Sequence "Quản trị viên - Tạo địa điểm mới" 87

Hình 53 Sequence "Quản trị viên - Tạo quản trị viên" 88

Hình 55 Sequence "Quản trị viên - Cập nhật loại địa điểm" 89

Hình 56 Sequence "Quản trị viên - Cập nhật địa điểm" 90

Hình 60 Sequence "Quản trị viên – Cập nhật trạng thái đóng góp" 91

Hình 63 Thanh điều hướng của Người dùng ẩn danh 106

Hình 64 Thanh điều hướng của Người dùng 106

Hình 72 Trang quên mật khẩu 116

Hình 73 Trang đặt lại mật khẩu 116

Hình 74 Trang cá nhân chi tiết 118

Hình 75 Trang cá nhân danh sách bài đăng 119

Hình 76 Trang cá nhân danh sách hình ảnh 120

Hình 77 Trang cá nhân danh sách bạn bè 120

Hình 78 Modal dialog tạo bài đăng 121

Hình 79 Modal dialog chi tiết bài đăng 122

Hình 80 Trang xem bài đăng chi tiết 122

Hình 81 Trang cấu hình tài khoản 124

Hình 82 Trang cấu hình ngôn ngữ 124

Hình 83 Trang giao diện nhắn tin 125

Hình 84 Trang giao diện phòng nhắn tin 126

Hình 85 Modal dialog tìm kiếm 127

Hình 86 Trang giao diện tìm kiếm 127

Hình 88 Trang thông tin địa điểm 129

Hình 89 Trang danh sách địa điểm du lịch 130

Hình 90 Trang danh sách bài đăng kinh nghiệm du lịch 130

Hình 91 Trang danh sách bài đăng hỏi đáp du lịch 131

Hình 92 Trang danh sách hình ảnh địa điểm du lịch 132

Hình 93 Trang đề xuất kết bạn 132

Hình 94 Trang tạo hành trình 133

Hình 95 Trang cập nhật thông tin hành trình 134

Hình 96 Trang hành trình chi tiết 136

Hình 97 Trang đóng góp địa điểm 138

Hình 98 Trang danh sách các địa điểm đã đóng góp 140

Hình 99 Trang danh sách thông báo 141

Hình 101 Trang quản lý tài khoản 143

Hình 102 Trang quản lý người dùng 144

Hình 103 Trang quản lý loại khu vực 145

Hình 105 Trang quản lý địa điểm 146

Hình 106 Trang quản lý bài đăng 146

Hình 107 Trang cá nhân quản trị viên 147

Hình 108 Trang quản lý khu vực 149

Hình 109 Trang quản lý danh sách bài đóng góp 150

Hình 110 Trang duyệt bài đóng góp 151

Bảng 6 Mô tả Use case "Tìm kiếm" 33

Bảng 7 Mô tả Use case "Đăng ký" 34

Bảng 9 Mô tả Use case "Đăng nhập" 36

Bảng 10 Mô tả Use case "Quên mật khẩu" 37

Bảng 14 Mô tả Use case "Cập nhật thông tin cá nhân" 39

Bảng 15 Mô tả Use case "Tạo bài đăng" 39

Bảng 16 Mô tả Use case "Cập nhật bài đăng" 40

Bảng 17 Mô tả Use case "Xóa bài đăng" 41

Bảng 18 Mô tả Use case "Thay đổi cảm xúc bài đăng" 42

Bảng 19 Mô tả Use case "Tạo bình luận" 43

Bảng 20 Mô tả Use case "Cập nhật bình luận" 44

Bảng 21 Mô tả Use case "Xóa bình luận" 45

Bảng 22 Mô tả Use case "Thay đổi trạng thái bạn bè" 46

Bảng 24 Mô tả Use case "Tạo phòng chat" 46

Bảng 25 Mô tả Use case "Gửi tin nhắn" 47

Bảng 27 Mô tả Use case "Đề xuất kết bạn" 48

Bảng 28: Mô tả Use case “Đóng góp địa điểm du lịch” 48

Bảng 31: Mô tả Use case "Tạo hành trình mới" 49

Bảng 32: Mô tả Use case "Cập nhật thông tin hành trình" 50

Bảng 33: Mô tả Use case "Xóa hành trình" 50

Bảng 34: Mô tả Use case "Gửi yêu cầu tham gia hành trình" 51

Bảng 35: Mô tả Use case "Cập nhật yêu cầu tham gia hành trình" 52

Bảng 36 Mô tả Use case "Tạo tài khoản mới" 52

Bảng 38 Mô tả Use case "Cập nhật thông tin địa điểm" 53

Bảng 39 Mô tả Use case "Tạo loại địa điểm mới" 54

Bảng 42 Mô tả Use case "Tạo địa điểm mới" 56

Bảng 44 Mô tả Use case "Tạo khu vực mới" 57

Bảng 46 Mô tả Use case "Xóa người dùng" 58

Bảng 50 Mô tả chi tiết bảng dữ liệu Areas 92

Bảng 51 Mô tả chi tiết bảng dữ liệu Chat_room_members 93

Bảng 52 Mô tả chi tiết bảng dữ liệu Chat_rooms 93

Bảng 53 Mô tả chi tiết bảng dữ liệu Comments 94

Bảng 54 Mô tả chi tiết bảng dữ liệu Friends 94

Bảng 56 Mô tả chi tiết bảng dữ liệu Hashtags 95

Bảng 57 Mô tả chi tiết bảng dữ liệu Messengers 95

Bảng 58 Mô tả chi tiết bảng dữ liệu Place_categories 96

Bảng 59 Mô tả chi tiết bảng dữ liệu Places 96

Bảng 61 Mô tả chi tiết bảng dữ liệu Post_images 97

Bảng 62 Mô tả chi tiết bảng dữ liệu Posts 97

Bảng 64 Mô tả chi tiết bảng dữ liệu Users 98

Bảng 65: Mô tả chi tiết bảng dữ liệu Notifications 99

Bảng 67: Mô tả chi tiết bảng dữ liệu Trip_days 99

Bảng 68: Mô tả chi tiết bảng dữ liệu Trip_members 100

Bảng 69: Mô tả chi tiết bảng dữ liệu Trip_place_fees 100

Bảng 70: Mô tả chi tiết bảng dữ liệu Trip_places 101

Bảng 71: Mô tả chi tiết bảng dữ liệu Trip_reviews 102

Bảng 72 Danh sách màn hình sử dụng phía Người dùng 104

Bảng 73 Các đối tượng trên thanh điều hướng 107

Bảng 74 Các đối tượng trên chân trang 108

Bảng 75 Các đối tượng trên trang trải nghiệm 108

Bảng 76 Các đối tượng trên trang hỏi đáp 110

Bảng 77 Các đối tượng trên trang hành trình 112

Bảng 78 Các đối tượng trên trang khám phá 113

Bảng 79 Các đối tượng trên trang đăng nhập 114

Bảng 80 Các đối tượng trên trang đăng ký 115

Bảng 81 Các đối tượng trên trang quên mật khẩu 116

Bảng 82 Các đối tượng trên trang đặt lại mật khẩu 117

Bảng 83 Các đối tượng trên trang cá nhân chi tiết 118

Bảng 84 Các đối tượng trên trang cá nhân danh sách bài đăng 119

Bảng 85 Các đối tượng trên trang cá nhân danh sách hình ảnh 120

Bảng 86 Các đối tượng trên trang cá nhân danh sách bạn bè 120

Bảng 87 Các đối tượng trên modal dialog tạo bài đăng 121

Bảng 88 Các đối tượng trên trang xem bài đăng chi tiết 122

Bảng 89 Các đối tượng trên trang cấu hình tài khoản 124

Bảng 90 Các đối tượng trên trang giao diện nhắn tin 125

Bảng 91 Các đối tượng trên trang giao diện phòng nhắn tin 126

Bảng 92 Các đối tượng trên trang giao diện tìm kiếm 128

Bảng 94 Các đối tượng trên trang thông tin địa điểm 129

Bảng 95 Các đối tượng trên trang danh sách địa điểm du lịch 130

Bảng 96 Các đối tượng trên trang danh sách bài đăng kinh nghiệm du lịch 131

Bảng 97 Các đối tượng trên trang danh sách bài đăng hỏi đáp du lịch 131

Bảng 98 Các đối tượng trên trang danh sách hình ảnh địa điểm du lịch 132

Bảng 99 Các đối tượng trên trang đề xuất kết bạn 132

Bảng 100 Các đối tượng trên trang tạo hành trình 133

Bảng 101 Các đối tượng trên trang cập nhật thông tin hành trình 134

Bảng 102 Các đối tượng trên trang hành trình chi tiết 136

Bảng 103 Các đối tượng trên trang đóng góp địa điểm 138

Bảng 104 Các đối tượng trên trang danh sách các địa điểm đã đóng góp 140

Bảng 105 Các đối tượng trên trang danh sách thông báo 141

Bảng 106 Danh sách màn hình sử dụng phía Quản trị 142

Bảng 107 Các đối tượng trên trang quản lý tài khoản 143

Bảng 108 Các đối tượng trên trang quản lý người dùng 144

Bảng 109 Các đối tượng trên trang quản lý loại khu vực 145

Bảng 111 Các đối tượng trên trang quản lý địa điểm 146

Bảng 112 Các đối tượng trên trang quản lý bài đăng 147

Bảng 113 Các đối tượng trên trang cá nhân quản trị viên 147

Bảng 114 Các đối tượng trên trang quản lý khu vực 149

Bảng 115 Các đối tượng trên trang quản lý danh sách bài đóng góp 150

Bảng 116 Các phần tử trên trang duyệt bài đóng góp 151

Bảng 118 Kết quả kiểm thử chức năng phía Người dùng 158

Bảng 119 Kết quả kiểm thử chức năng phía Quản trị viên 161

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

Ngày nay, các doanh nghiệp đang tận dụng mạng xã hội để quảng bá sản phẩm và dịch vụ, đồng thời nâng cao nhận diện thương hiệu Đặc biệt, nhiều công ty trong ngành du lịch đã khai thác hiệu quả nguồn tài nguyên này để tiếp cận gần gũi hơn với du khách.

Theo tổ chức Diễn đàn Kinh tế thế giới (WEF), du lịch đã chịu ảnh hưởng nghiêm trọng trong năm 2020 do đại dịch Covid-19 Nhằm hỗ trợ mọi người tiếp cận thông tin đáng tin cậy về địa điểm du lịch và tăng cường kết nối qua mạng xã hội, nhóm chúng tôi đã quyết định phát triển tiểu luận chuyên ngành với chủ đề: “XÂY DỰNG WEBSITE CỘNG ĐỒNG CHIA SẺ TRẢI NGHIỆM DU LỊCH VÀ ĐIỂM ĐẾN”.

2 ĐỐI TƯỢNG NGHIÊN CỨU Để hoàn thiện đề tài này, nhóm chúng em tiến hành nghiên cứu nhu cầu thực tế của mỗi người trong việc tham gia mạng xã hội, cũng như nhu cầu tìm bạn đồng hành, tìm vị trí du lịch hợp lý, Đồng thời chúng em cũng nghiên cứu các công nghệ để có thể xây dựng hệ thống hoàn chỉnh nhất, bao gồm:

 Tập trung nghiêm cứu Restful API, Spring boot để xây dựng nên hệ thống các API

 Sử dụng Cơ sở dữ liệu MySQL để lưu trữ dữ liệu cho hệ thống

Chúng tôi đã tiến hành nghiên cứu về hiển thị cho người sử dụng cuối, tập trung vào ReactJS cùng với framework hỗ trợ NextJS, Redux và một số thư viện khác.

3 PHẠM VI NGHIÊN CỨU Ở đề tài này, chúng em chủ yếu xây dựng một webiste cho phép người dùng sử dụng như một mạng xã hội thông thường, ngoài ra còn hỗ trợ người dùng tiếp cận với một hành trình du lịch thú vị như: chia sẻ khoảnh khắc – trải nghiệm thực tế, đặt câu hỏi thắc mắc về du lịch sẽ được tư vấn, khám phá không những vị trí du lịch mà còn những địa điểm ăn uống vui chơi được người dùng khác chia sẻ,

Xây dựng một kế hoạch du lịch hiệu quả bằng cách tìm kiếm bạn đồng hành phù hợp, đồng thời tận dụng các tính năng liên quan đến tài khoản người dùng và nhiều tiện ích khác để nâng cao trải nghiệm du lịch của bạn.

4 MỤC TIÊU CỦA ĐỀ TÀI

- Tạo một cuộc hành trình và tìm kiếm người đồng hành

- Thống kê báo cáo các hoạt động của trang web

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Sau khi hoàn thiện đề tài, nhóm chúng em đã rèn luyện nhiều kỹ năng và kiến thức mới, đặc biệt về công nghệ hiện đại Chúng em nâng cao tinh thần nghiên cứu và sáng tạo, cống hiến cho cộng đồng Khi đề tài được áp dụng, mạng xã hội du lịch sẽ trở nên phổ biến hơn, tiếp cận đa dạng lứa tuổi và góp phần phát triển ngành du lịch trong bối cảnh phục hồi sau đại dịch Covid.

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT – END

Next.js is a framework designed for developing React applications with an isomorphic approach, featuring Server Side Rendering (SSR) capabilities It offers various functionalities to enhance the development experience.

- Hiệu năng tốt hơn so với ứng dụng CSR

- Mang lại khả năng SEO tốt hơn mà CSR không có

Next.js offers features such as server-side rendering, static site generation, and single-page application capabilities, enabling faster web application development and optimizing website performance.

Next.js offers several advantages, including enhanced user experience, the ability to utilize Static Site Generation, Server-Side Rendering, and Client-Side Rendering It is built on React, facilitating rapid feature development and configuration.

Mặc dù Next.js có nhiều ưu điểm, nhưng vẫn tồn tại một số nhược điểm như thiếu các plug-in thích ứng và bị giới hạn bởi việc chỉ sử dụng bộ định tuyến dựa trên tệp của nó Điều này có nghĩa là không thể tùy chỉnh cách thức giao dịch với các tuyến, và để triển khai định tuyến động, người dùng cần phải làm việc thêm với máy chủ Node.js.

Redux là thư viện JavaScript chuyên quản lý trạng thái ứng dụng, trong khi Redux Toolkit là gói hỗ trợ giúp đơn giản hóa quá trình cài đặt Redux Với Redux Toolkit, việc viết mã Redux trở nên nhanh chóng và hiệu quả hơn, đồng thời tuân thủ các quy chuẩn thống nhất.

Redux cung cấp nhiều lợi ích như khả năng dự đoán kết quả chính xác, dễ dàng bảo trì và tổ chức mã nguồn Đặc biệt, nó nổi bật với tính năng dễ kiểm tra và quan sát thông qua các công cụ phát triển (Developer tools).

State của front-end và back-end thường không đồng bộ, tạo ra một nhược điểm cho mô hình server-client và redux do không thể cache dữ liệu hiệu quả.

This library addresses server state management and caching issues in applications, making it easier to fetch, cache, synchronize, and update server state in React applications.

KHẢO SÁT HIỆN TRẠNG

KIẾN TRÚC CHUNG CỦA HỆ THỐNG

Ngày nay, các doanh nghiệp tận dụng mạng xã hội để quảng bá sản phẩm và dịch vụ, đồng thời nâng cao nhận diện thương hiệu Đặc biệt, nhiều công ty trong ngành du lịch đã khai thác hiệu quả nguồn tài nguyên này để tiếp cận gần hơn với khách du lịch.

Theo tổ chức Diễn đàn Kinh tế Thế giới (WEF), ngành du lịch đã chịu ảnh hưởng nặng nề trong năm 2020 do đại dịch Covid-19 Nhằm hỗ trợ mọi người tiếp cận thông tin đáng tin cậy về địa điểm du lịch và kết nối họ qua mạng xã hội, nhóm chúng tôi quyết định phát triển chủ đề tiểu luận chuyên ngành: “XÂY DỰNG WEBSITE CỘNG ĐỒNG CHIA SẺ TRẢI NGHIỆM DU LỊCH VÀ ĐIỂM ĐẾN”.

Nhóm chúng em đã tiến hành nghiên cứu về hiển thị cho người sử dụng cuối, tập trung vào ReactJS cùng với framework hỗ trợ NextJS, Redux và một số thư viện khác.

Xây dựng một kế hoạch du lịch hiệu quả và tìm kiếm bạn đồng hành là hai yếu tố quan trọng trong việc tạo nên trải nghiệm du lịch thú vị Để tối ưu hóa quá trình này, người dùng có thể tận dụng các tính năng liên quan đến tài khoản cá nhân, giúp quản lý thông tin và kết nối với những người có cùng sở thích Ngoài ra, nhiều tính năng khác cũng hỗ trợ trong việc lập kế hoạch và tổ chức chuyến đi, mang lại sự thuận tiện và tiết kiệm thời gian cho người dùng.

Sau khi hoàn thiện đề tài, nhóm chúng em sẽ nâng cao kỹ năng và kiến thức, đặc biệt về công nghệ mới Đề tài của chúng em sẽ thúc đẩy tinh thần nghiên cứu, sáng tạo và cống hiến cho cộng đồng Khi được áp dụng thực tế, mạng xã hội du lịch mà chúng em phát triển sẽ trở nên phổ biến, tiếp cận đa dạng lứa tuổi và góp phần phát triển ngành du lịch hậu Covid-19.

Next.js is a framework designed for developing React applications with an isomorphic approach, incorporating Server-Side Rendering (SSR) capabilities It offers several features that enhance the development process.

Next.js offers several key features, including server-side rendering, static site generation, and single-page application capabilities, which collectively enable faster web application development and enhance website optimization.

Next.js offers several advantages, including an enhanced user experience, efficient Static Site Generation, Server Side Rendering, and Client Side Rendering capabilities It is built on React, facilitating rapid feature development and easy configuration.

Mặc dù Next.js có nhiều ưu điểm, nhưng cũng tồn tại một số nhược điểm như thiếu plug-in thích ứng và bị giới hạn bởi việc chỉ sử dụng bộ định tuyến dựa trên tệp, không cho phép tùy chỉnh cách thức giao dịch với các tuyến Do đó, để triển khai định tuyến động, người dùng cần phải làm việc thêm với máy chủ Node.js.

Redux là thư viện JavaScript giúp quản lý trạng thái ứng dụng hiệu quả Redux Toolkit là một gói phần mềm được thiết kế để giải quyết các vấn đề phức tạp khi cài đặt Redux, giúp lập trình viên viết mã Redux một cách nhanh chóng, gọn gàng và theo một tiêu chuẩn thống nhất.

Redux cung cấp nhiều lợi ích nổi bật, bao gồm khả năng dự đoán kết quả chính xác, dễ dàng bảo trì và tổ chức mã nguồn Đặc biệt, Redux hỗ trợ kiểm tra và giám sát hiệu quả thông qua các công cụ phát triển, giúp nâng cao trải nghiệm lập trình viên.

Trạng thái của front-end và back-end thường không đồng bộ, điều này tạo ra một nhược điểm cho mô hình server-client cũng như cho redux, vì không thể lưu trữ dữ liệu hiệu quả.

This library addresses server state management and caching issues in applications, making it easier to fetch, cache, synchronize, and update server state in React applications.

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

MÔ HÌNH HÓA YÊU CẦU

THIẾT KẾ GIAO DIỆN

Ngày nay, doanh nghiệp đã tận dụng mạng xã hội để quảng bá sản phẩm và dịch vụ, đồng thời nâng cao nhận diện thương hiệu Đặc biệt, nhiều công ty trong ngành du lịch đang khai thác hiệu quả nguồn tài nguyên này để tiếp cận gần gũi hơn với du khách.

Theo Diễn đàn Kinh tế thế giới (WEF), ngành du lịch là một trong những lĩnh vực chịu ảnh hưởng nặng nề nhất bởi đại dịch Covid-19 trong năm 2020 Nhằm hỗ trợ mọi người tiếp cận thông tin đáng tin cậy về các địa điểm du lịch và kết nối cộng đồng qua mạng xã hội, nhóm chúng tôi đã quyết định phát triển chủ đề tiểu luận chuyên ngành: “XÂY DỰNG WEBSITE CỘNG ĐỒNG CHIA SẺ TRẢI NGHIỆM DU LỊCH VÀ ĐIỂM ĐẾN”.

Chúng tôi đã tiến hành nghiên cứu về hiển thị cho người sử dụng cuối bằng cách sử dụng ReactJS, cùng với framework hỗ trợ NextJS, Redux và một số thư viện khác.

Xây dựng một kế hoạch du lịch hoàn hảo và tìm kiếm bạn đồng hành là những bước quan trọng để có một chuyến đi thú vị Hệ thống tài khoản người dùng giúp quản lý thông tin cá nhân và dễ dàng kết nối với những người có cùng sở thích Ngoài ra, nhiều tính năng khác hỗ trợ tối ưu hóa trải nghiệm du lịch, từ việc lên lịch trình đến chia sẻ thông tin hữu ích.

Sau khi hoàn thiện đề tài, nhóm chúng em sẽ tiếp thu nhiều kỹ năng và kiến thức mới, đặc biệt về công nghệ hiện đại Đề tài này không chỉ nâng cao tinh thần nghiên cứu và sáng tạo mà còn cống hiến cho cộng đồng Khi được áp dụng vào thực tế, mạng xã hội chuyên về du lịch sẽ trở nên phổ biến hơn, tiếp cận đa dạng lứa tuổi và góp phần phát triển ngành du lịch trong bối cảnh phục hồi sau đại dịch Covid.

Next.js is a framework designed for developing applications with React, following the principles of Isomorphic architecture, and it includes Server Side Rendering (SSR) capabilities This framework offers various features that enhance the development experience.

Next.js offers essential features such as server-side rendering, static site generation, and single-page application capabilities, enabling faster web application development and optimizing website performance.

NextJS offers several advantages, including enhanced user experience, efficient Static Site Generation, Server Side Rendering, and Client Side Rendering capabilities It is built on React, facilitating rapid feature development and easy configuration.

Mặc dù Next.js có nhiều ưu điểm, nhưng cũng tồn tại một số nhược điểm, chẳng hạn như sự hạn chế về số lượng plug-in thích ứng và việc chỉ sử dụng bộ định tuyến trên tệp của nó Điều này có nghĩa là không thể điều chỉnh cách thức giao dịch với các tuyến, do đó, để sử dụng định tuyến động, người dùng cần phải làm việc thêm với máy chủ Node.js.

Redux là thư viện JavaScript chuyên quản lý trạng thái ứng dụng, trong khi Redux Toolkit là gói hỗ trợ giúp đơn giản hóa quá trình cài đặt và viết mã Redux, đảm bảo tính nhanh gọn và tuân thủ quy chuẩn nhất quán.

Redux mang lại nhiều lợi ích nổi bật như khả năng dự đoán kết quả chính xác, dễ dàng bảo trì và tổ chức mã nguồn Đặc biệt, Redux hỗ trợ việc kiểm tra và quan sát hiệu quả thông qua các công cụ dành cho nhà phát triển, giúp tối ưu hóa quy trình phát triển ứng dụng.

State của front-end và back-end thường không đồng bộ, điều này tạo ra một nhược điểm trong mô hình server-client Hơn nữa, việc không thể cache dữ liệu cũng là một hạn chế của Redux.

This library addresses server state management and caching issues in applications, simplifying the processes of fetching, caching, synchronizing, and updating server state in React applications.

CÀI ĐẶT VÀ KIỂM THỬ

CÀI ĐẶT

1.1.1 Yêu cầu hệ thống Để có thể chạy được ứng dụng, máy tính phải đảm bảo các yêu cầu sau:

Để bắt đầu, bạn cần cài đặt Java với phiên bản tối thiểu là 17.0.0, sau đó tiến hành cài đặt Apache Maven (phiên bản tối thiểu 3.8.3) và MySQL (phiên bản tối thiểu 8.0) Tiếp theo, hãy cài đặt npm và thư viện React của JavaScript Cuối cùng, đừng quên cài đặt IntelliJ IDEA để hỗ trợ quá trình phát triển.

Bước 1: Clone hoặc download project từ link github: o Project: https://github.com/hieudan26/hcmute (private repository)

Bước 2: Khởi chạy Back-End o Sau khi clone Project về máy, khởi động Intellij và mở project ở thư mục

“backend” o Sau đó bấm vào nút tam giác màu xanh để khởi chạy hoặc phím tắt Shift + F10 để khởi chạy backend

Step 3: Launch the Front-End After cloning the project to your machine, right-click on the downloaded folder and select "Open in Windows Terminal." Once Windows Terminal is open, execute the command "cd frontend" followed by the necessary command to run the application.

To update the necessary libraries and packages for your project to function properly, use the command "npm i" or "yarn install." Next, initiate the Front-End by executing "npm start-dev" or "yarn start-dev" in the Windows Terminal.

KIỂM THỬ

Bảng 92 Phạm vi kiểm thử

Module Đăng ký tài khoản cho phép người dùng tạo tài khoản bằng email, trong khi Module Đăng nhập yêu cầu người dùng truy cập hệ thống thông qua email và mật khẩu.

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

Người dùng Người dùng chỉnh sửa thông tin cá nhân của mình

Tìm kiếm post, địa điểm và người khác

Người dùng Người dùng có thể thông qua từ khóa và tìm kiếm post, địa điểm và người dùng khác

Cập nhật mật khẩu Người dùng Người dùng thay đổi mật khẩu của mình

Thêm và chỉnh sửa post

Người dùng Người dùng có thể tạo mới và chỉnh sửa post của bản thân

Thêm và hủy react post

Người dùng Người dùng có thể react hoặc hủy react một bài viết

Gửi lời mời kết ban Người dùng Người dùng gửi một lời mời kết bạn đến người dùng khác

Chấp nhận lời mời kết bạn

Người dùng Người dùng chấp nhận lời mời kết bạn từ người dùng khác

Nhắn tin với bạn bè Người dùng Người dùng nhắn tin với người dùng

155 khác đã kết bạn với bản thân

Thêm và chỉnh sửa comment

Người dùng Người dùng tạo mới hoặc chỉnh sửa comment của mình

Thêm và chỉnh sửa địa điểm

Quản trị viên Quản trị viên tạo mới và chỉnh sửa địa điểm trong hệ thống

Thêm và chỉnh sửa danh mục địa điểm

Quản trị viên Quản trị viên tạo mới và chỉnh sửa danh mục địa điểm trong hệ thống

Thêm và chỉnh sửa khu vực

Quản trị viên Quản trị viên tạo mới và chỉnh sửa khu vực trong hệ thống

Xóa người dùng Quản trị viên Quản trị viên vô hiệu hóa tài khoản người dùng Đóng góp địa điểm du lịch

Người dùng Người dung có thể đóng góp 1 địa điểm du lịch cho hệ thống

Xem danh sách thông báo

Người dùng Người dung có thể xem thông báo các hoạt động của người khác có ảnh hưởng đến mình

Tạo hành trình mới Người dùng Người dung có thể tạo một hành mới để mời mọi người cùng tham gia,

Cập nhật thông tin hành trình

Người dùng Người dùng có thể cập nhật thông tin cho hành trình mình đã tạo

Xóa hành trình Người dùng Người dùng có xóa hành trình mình đã tạo

Gửi yêu cầu tham gia hành trình

Người dùng có khả năng gửi yêu cầu tham gia vào hành trình của người khác Họ cũng có thể cập nhật yêu cầu và có quyền phê duyệt hoặc từ chối những yêu cầu đó.

156 tham gia hành trình chối lời yêu cầu tham gia hành trình của mình từ người khác

Cập nhật trạng thái bài viết đóng góp

Quản trị viên Quản trị viên có thể cập nhật trạng thái các bài viết người dùng đóng góp

Các tính năng không được kiểm thử:

- Sự logic của cơ sở dữ liệu

Các loại kiểm thử được sử dụng để kiểm thử dự án:

- Integration test: kết hợp các module của ứng dụng và kiểm thử như một ứng dụng hoàn chỉnh

- System test: kiểm thử thiết kế và bộ hệ thống (sau khi tích hợp) có thỏa mãn yêu cầu đã đặt ra hay không

- Usability test: xác minh ứng dụng có khả năng ứng dụng cao và dễ sử dụng, giao diện thân thiện với người dùng

1.2.1.3 Rủi ro và các vấn đề

Dự án sẽ sử dụng các thành viên trong nhóm làm tester Quá trình kiểm thử sẽ bắt đầu khi tất cả các điều sau được thỏa mãn:

- Phần mềm đã sẵn sàng để kiểm thử

- Đặc tả kiểm thử được xác định

- Môi trường kiểm thử được xây dựng

- Đủ nhân lực cho quá trình kiểm thử

Rủ ro Kế hoạch giảm nhẹ

Các thành viên trong nhóm thiếu kỹ năng cần thiết để kiểm thử phần mềm

Các thành viên trong nhóm cùng nhau tìm kiếm tài liệu và các hướng dẫn trên mạng Internet để học hỏi thêm lý thuyết và kỹ năng

Quy trình kiểm thử gồm 6 bước như sau:

1 Requirement analysis - Phân tích yêu cầu: nghiên cứu, phân tích yêu cầu dự án

2 Test planning - Lập kế hoạch kiểm thử:

- Xác định phạm vi dự án

- Xác định phương pháp tiếp cận

- Lên kế hoạch thiết kế công việc kiểm thử

3 Test case development - Thiết kế test case:

- Chuẩn bị dữ liệu kiểm thử

4 Test environment setup - Thiết lập môi trường kiểm thử: thiết lập và kiểm tra môi trường kiểm thử

5 Test execution - Thực hiện kiểm thử:

- Thực hiện kiểm thử phần mềm

- So sánh với kết quả mong đợi và báo cáo các lỗi xảy ra lên công cụ quản lý lỗi

- Thực hiện re-test để xác định các lỗi đã được sửa và regression test khi có sự thay đổi liên quan

- Đo và phân tích tiến độ

- Điều chỉnh, sửa chữa tài liệu tiến độ dự án theo tình hình thực tế

- Báo cáo thường xuyên cho Project Manager và khách hàng về tình hình thực hiện dự án

6 Test cycle closure - Đóng chu trình kiểm thử:

- Tổng kết, báo cáo kết quả về việc thực thi test case

- Đánh giá các tiêu chí hoàn thành như phạm vi kiểm tra, chất lượng, chi

- phí, thời gian, mục tiêu kinh doanh quan trọng

- Thảo luận và rút ra bài học kinh nghiệm

Bảng 93 Kết quả kiểm thử chức năng phía Người dùng

STT Mô tả Các bước thực hiện Kết quả mong muốn

1 Kiểm thử chức năng đăng kí tài khoản

-Nhập đầy đủ thông tin đăng ký

- Nhập mã OTP được nhận từ email

Thông báo đăng kí thành công và chuyển sang màn hình nhập thông tin cá nhân

Thông báo đăng kí thành công và chuyển sang màn hình nhập thông tin cá nhân Đạt

2 Kiểm thử chức năng đăng nhập

- Nhấn nút Đăng nhập Đăng nhập thành công và chuyển sang trang chủ Đăng nhập thành công và chuyển sang trang chủ Đạt

3 Kiểm thử chức năng khôi phục mật khẩu

- Nhập email và bấm nhận mã để thay đổi mật khẩu

-Nhập các thông tin để thay đổi mật khẩu trong đó có OTP được nhận từ email

- Nhấn nút Đặt lại mật khẩu

Thông báo thành công và chuyển sang trang đăng nhập

Thông báo thành công và chuyển sang trang đăng nhập Đạt

4 Kiểm thử chức năng chỉnh sửa thông tin tài khoản

Thông tin được chỉnh sửa đã được thay đổi

Thông tin được chỉnh sửa đã được thay đổi Đạt

5 Kiểm thử chức năng đổi mật khẩu

- Nhấn nút lưu những thay đổi

Thông báo thay đổi thành công

Thông báo thay đổi thành công Đạt

6 Kiểm thử chức năng tìm kiếm post, địa điểm và người khác

- Nhập từ khóa ở ô tìm kiếm

- Nhấn nút Search more here

Chuyển đến trang tìm kiếm và hiển thị danh sách post, địa điểm và người khác có chứa từ khóa vừa nhập

Chuyển đến trang tìm kiếm và hiển thị danh sách post, địa điểm và người khác có chứa từ khóa vừa nhập Đạt

7 Kiểm thử chức năng thêm và chỉnh sửa post

- Ở trang trải nghiệm hoặc hỏi đáp nhập thông tin post

Bài viết vừa tạo được hiển thị ở đầu trang

Bài viết vừa tạo được hiển thị ở đầu trang Đạt

8 Kiểm thử chức năng thêm và hủy react post

- Ở một bài viết bất kì nhấn nút trái tim

Nếu chưa react thì sẽ react bài viết, nếu đã react thì sẽ hủy react

Nếu chưa react thì sẽ react bài viết, nếu đã react thì sẽ hủy react Đạt

9 Kiểm thử chức năng gửi lời mời kết ban

- Ở trang cá nhân của người khác không phải là bạn bè nhấn nút kết bạn

Trạng thái nút kết bạn thay đổi thành Rút lại lời mời kết bạn đồng thời người kia cũng nhận được lời mời kết bạn

Trạng thái nút kết bạn thay đổi thành Rút lại lời mời kết bạn đồng thời người kia cũng nhận được lời mời kết bạn Đạt

10 Kiểm thử chức năng chấp nhận lời mời kết bạn

- Ở trang cá nhân của bản thân chọn friends

- Chọn friend request to you

Người dùng sẽ chuyển sang tab bạn bè

Người dùng sẽ chuyển sang tab bạn bè Đạt

11 Kiểm thử chức năng nhắn tin với

- Ở trang chat nhập tin nhắn

Tin nhắn vừa gửi được cập

Tin nhắn vừa gửi được cập Đạt

- Nhấn nút send nhật lên màn hình và người bạn chat cũng sẽ hiện như vậy nhật lên màn hình và người bạn chat cũng sẽ hiện như vậy

12 Kiểm thử chức năng thêm comment

- Ở một bài post bất kì nhập bình luận

Comment vừa nhập được hiển thị bên dưới bài post

Comment vừa nhập được hiển thị bên dưới bài post Đạt

13 Kiểm thử chức năng đóng góp địa điểm du lịch

- Ở trang đóng góp địa điểm du lịch nhập đầy đủ thông tin

Popup thông báo thành công và admin thấy được bài viết vừa đóng góp trong dashboard của admin

Popup thông báo thành công và admin thấy được bài viết vừa đóng góp trong dashboard của admin Đạt

14 Kiểm thử chức năng xem danh sách thông báo

- Ở giao diện bất kì nhấn vào nút hình chuông sau đó nhấn vào nút ba chấm sau đó chọn Mở thông báo

Hiển thị trang danh sách các thông báo của bản thân

Hiển thị trang danh sách các thông báo của bản thân Đạt

15 Kiểm thử chức năng tạo hành trình mới Ở trang tạo hành trình nhập đầy đủ các thông tin sau đó nhấn tiếp tục

Tạo hành trình thành công vào chuyển sang giao diện cập nhật thông tin hành trình

Tạo hành trình thành công vào chuyển sang giao diện cập nhật thông tin hành trình Đạt

16 Kiểm thử chức năng cập nhật thông tin hành trình Ở giao diện cập nhật thông tin hành trình điền các thông tin sau đó bấm nút Lưu

Popup hiển thị lưu thành công và thông tin đã được cập

Popup hiển thị lưu thành công vào thông tin đã được Đạt

161 hành trình nhật cập nhật

17 Kiểm thử chức năng xóa hành trình Ở giao diện cập nhật thông tin hành trình bấm nút Xóa hành trình

Popup hiển thị xóa thành công và hành trình không hiển thị nữa

Popup hiển thị xóa thành công và hành trình không hiển thị nữa Đạt

Kiểm thử chức năng gửi yêu cầu tham gia hành trình trên trang chi tiết của bất kỳ hành trình nào không phải của bản thân bằng cách nhấn nút "Gửi yêu cầu tham gia".

Popup hiển thị gửi thành công và nut Gửi yêu cầu tham gia chuyển thành Hủy yêu cầu tham gia

Popup hiển thị gửi thành công và nut Gửi yêu cầu tham gia chuyển thành Hủy yêu cầu tham gia Đạt

Kiểm thử chức năng cập nhật yêu cầu tham gia hành trình bao gồm việc truy cập trang cập nhật thông tin chi tiết của hành trình, nhấn nút Quản lý yêu cầu tham gia và chọn một người dùng trước khi nhấn vào nút Chấp thuận.

Popup hiển thị chấp thuận thành công và danh sách phê duyệt biến mất hiển thị thêm ở phần thành viên

Popup hiển thị chấp thuận thành công và danh sách phê duyệt biến mất hiển thị thêm ở phần thành viên Đạt

Bảng 94 Kết quả kiểm thử chức năng phía Quản trị viên

STT Mô tả Các bước thực hiện Kết quả mong muốn Kết quả thực tế Trạng thái

1 Kiểm thử chức năng tạo mới địa điểm

- Ở trang create new place nhập thông tin

- Bấm nút create new place

Thông báo tạo thành công Địa điểm mới đã được tạo

Thông báo tạo thành công Địa điểm mới đã được tạo Đạt

2 Kiểm thử chức năng chỉnh sửa địa điểm

- Ở trang All places in system chọn địa điểm muốn chỉnh sửa

Thông báo chỉnh sửa thành công Địa điểm đã

Thông báo chỉnh sửa Đạt

- Nhấn nút save changes được chỉnh sửa thành công Địa điểm đã được chỉnh sửa

3 Kiểm thử chức năng tạo mới danh mục địa điểm

- Ở trang All categories in system chọn tab create

Thông báo tạo thành công Danh mục địa điểm mới đã được tạo

Thông báo tạo thành công

Danh mục địa điểm mới đã được tạo Đạt

4 Kiểm thử chức năng chỉnh sửa danh mục địa điểm

- Ở trang All places in system chọn địa điểm muốn chỉnh sửa

Thông báo chỉnh sửa thành công

Danh mục địa điểm đã được chỉnh sửa

Thông báo chỉnh sửa thành công

Danh mục địa điểm đã được chỉnh sửa Đạt

5 Kiểm thử chức năng tạo mới khu vực

Thông báo tạo thành công Khu vực điểm mới đã được tạo

Thông báo tạo thành công

Khu vực điểm mới đã được tạo Đạt

6 Xóa người dùng - Ở trang All users in system nhấn nút delete

Tài khoản người dùng vừa được nhấn bị vô hiệu hóa

Tài khoản người dùng vừa được nhấn bị vô hiệu hóa Đạt

7 Xóa bài viết - Ở trang All posts in system nhấn nút delete Bài post đã bị vô hiệu hóa

Bài post đã bị vô hiệu hóa Đạt

8 Kiểm thử chức năng cập nhật trạng thái bài viết đóng góp Ở trang danh sách các bài đóng góp bấm vào chi tiết một bài đóng góp bất kì

Chỉnh sửa thông tin trạng thái và nhấn

Chấp thuận hoặc Từ chối

Popup hiển thị cập nhật thành công và trạng thái của bài đóng góp được cập nhật

Popup hiển thị cập nhật thành công và trạng thái của bài đóng góp được cập nhật Đạt

ƯU ĐIỂM

4.Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày 12 tháng 07 năm 2023

(Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độ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: Nguyễn Hiếu Đan MSSV 1: 19110345

Họ và tên Sinh viên 2: Dương Đức Thắng MSSV 2: 19110461

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

Tên đề tài: Xây dựng website cộng đồng chia sẻ trải nghiệm du lịch và điểm đến

Họ và tên Giáo viên phản biện: ThS Mai Anh Thơ

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

4.Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày 12 tháng 07 năm 2023

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

Chúng em xin chân thành cảm ơn Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã tạo điều kiện thuận lợi cho việc rèn luyện và học tập của chúng em, giúp chúng em xây dựng nền tảng kiến thức vững chắc để hoàn thành đề tài này.

Chúng em xin chân thành cảm ơn thầy Lê Văn Vinh vì sự tận tâm và những góp ý quý báu trong quá trình thực hiện đề tài Sự hướng dẫn chân thành của thầy đã đóng góp quan trọng giúp chúng em hoàn thiện công việc này.

Chúng em xin gửi lời cảm ơn chân thành đến Khoa Công Nghệ Thông Tin, đội ngũ giảng viên và đặc biệt là thầy Lê Văn Vinh, người đã truyền đạt cho chúng em kiến thức và kinh nghiệm quý báu trong chuyên ngành cũng như các yêu cầu thực tiễn của xã hội Sự hỗ trợ này đã giúp chúng em hoàn thành đề tài và trang bị cho mình một kho tàng tri thức quý giá trước khi bước vào cuộc sống mới.

Chúng em đã nỗ lực hết mình để hoàn thành công việc này, nhưng nhận thức rằng kiến thức là vô hạn và mỗi người đều có những giới hạn riêng Vì vậy, chúng em rất mong nhận được sự góp ý chân thành từ quý thầy (cô) để học hỏi và cải thiện sản phẩm của mình đến mức tốt nhất có thể.

Chúng em xin gửi lời cảm ơn chân thành đến Khoa Công Nghệ Thông Tin, thầy Lê Văn Vinh và toàn thể giảng viên đã hỗ trợ và góp phần vào thành công của chúng em Sự tận tâm và hỗ trợ của quý thầy (cô) là động lực lớn giúp chúng em tiếp tục nỗ lực và phát triển trong hành trình sắp tới Chân thành cảm ơn!

Nguyễn Hiếu Đan – 19110345 Dương Đức Thắng – 19110461

Trường Đại học Sư phạm Kỹ thuật TP.HCM

Khoa Công nghệ Thông tin ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và Tên SV thực hiện 1: Nguyễn Hiếu Đan Mã Số SV: 19110345

Họ và Tên SV thực hiện 2: Dương Đức Thắng Mã Số SV: 19110461 Thời gian làm luận văn: Từ 27/02/2023 đến 10/07/2023

Chuyên ngành: Công nghệ phần mềm

Tên luận văn: Xây dựng website cộng đồng chia sẻ trải nghiệm du lịch và điểm đến

Giáo viên hướng dẫn: TS Lê Văn Vinh

Nhiệm vụ của luận văn:

Tìm hiểu về các công nghệ: ReactJS – NextJS, Redux, STOMP, Java Spring boot, AWS, Socket.io, JSON Web Token

- Sử dụng Java Spring boot để xây dựng Backend, viết API cho các module trong hệ thống

- Sử dụng MySQL để lưu trữ dữ liệu người dùng của hệ thống

- Sử dụng JSON Web Token để xác thực và ủy quyền cho hệ thống API hoạt động tốt và hiệu quả

- Sử dụng thư viện NextJS để thiết kế và xử lý giao diện web Đề cương viết luận văn:

1.1 Tính cấp thiết của đề tài

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

1.5 Ý nghĩa khoa học và thực tiễn

1 Chương 1: CƠ SỞ LÝ THUYẾT

1.1 Các công nghệ sử dụng ở Front – end

1.1.4 Một vài thư viện hỗ trợ khác

1.2 Các công nghệ sử dụng ở Back – end

2 Chương 2: KHẢO SÁT HIỆN TRẠNG

2.3 Kiến trúc chung của hệ thống

Ngày nay, các doanh nghiệp đang tận dụng mạng xã hội để quảng bá sản phẩm và dịch vụ, đồng thời nâng cao nhận diện thương hiệu Đặc biệt, nhiều công ty trong ngành du lịch đã khai thác hiệu quả nguồn tài nguyên này để tiếp cận gần hơn với du khách.

Theo Diễn đàn Kinh tế thế giới (WEF), ngành du lịch đã chịu ảnh hưởng nặng nề trong năm 2020 do đại dịch Covid-19 Nhằm hỗ trợ mọi người tiếp cận thông tin đáng tin cậy về địa điểm du lịch và kết nối qua mạng xã hội, nhóm chúng tôi đã quyết định phát triển chủ đề tiểu luận chuyên ngành: “Xây dựng website cộng đồng chia sẻ trải nghiệm du lịch và điểm đến”.

Chúng tôi đã tiến hành nghiên cứu về hiển thị cho người sử dụng cuối bằng cách sử dụng ReactJS, kết hợp với framework NextJS, Redux và một số thư viện hỗ trợ khác.

Xây dựng một kế hoạch du lịch hiệu quả và tìm kiếm bạn đồng hành là hai yếu tố quan trọng trong việc tạo ra trải nghiệm du lịch thú vị Bên cạnh đó, việc tích hợp các tính năng liên quan đến tài khoản người dùng cũng góp phần nâng cao sự tiện lợi và cá nhân hóa cho người dùng Nhiều tính năng khác sẽ hỗ trợ tối đa cho quá trình lên kế hoạch và thực hiện chuyến đi, giúp bạn dễ dàng kết nối và chia sẻ với những người cùng đam mê du lịch.

Sau khi hoàn thành đề tài, nhóm chúng em đã tiếp thu nhiều kỹ năng và kiến thức mới, đặc biệt về công nghệ hiện đại Điều này không chỉ nâng cao tinh thần nghiên cứu và sáng tạo mà còn góp phần cống hiến cho cộng đồng Khi đề tài được áp dụng thực tế, mạng xã hội hướng tới du lịch sẽ trở nên phổ biến hơn, tiếp cận được đa dạng lứa tuổi và hỗ trợ sự phát triển của ngành du lịch trong bối cảnh hậu đại dịch Covid.

Next.js is a framework designed for developing React applications with an isomorphic approach, incorporating Server Side Rendering (SSR) capabilities It offers various features that enhance the development process.

Next.js offers essential features such as server-side rendering, static site generation, and single-page applications, enabling faster web application development and optimizing website performance.

Next.js offers several advantages, including enhanced user experience, support for Static Site Generation, Server Side Rendering, and Client Side Rendering It is built on React, facilitating rapid feature development and configuration.

NHƯỢC ĐIỂM

Tuy nhiên, do giới hạn về thời gian và nhân lực, ứng dụng cũng có một số nhược điểm như sau:

 Chưa xây dựng tính năng lọc bài viết tự động

 Chưa có nhiều lợi ích thu hút người dùng đóng góp vào hệ thống

 Bên cạnh đó, website chưa hỗ trợ giao diện di động.

HƯỚNG PHÁT TRIỂN

Để xây dựng được ứng dụng đầy đủ và hoàn thiện hơn, chúng em hướng đến:

 Tiếp tục mở rộng phát triển các tính năng của một trang mạng xã hội

 Áp dụng AWS và AI xây dựng tính năng nhận diện bài viết tự động

 Hoàn thiện giao diện phù hợp với các thiết bị khác

 Thêm các chức năng lợi ích thu hút người dùng đóng góp, chia sẻ trải nghiệm cho hệ thống

Tiêu đề	Xây Dựng Website Cộng Đồng Chia Sẻ Trải Nghiệm Du Lịch Và Điểm Đến
Tác giả	Nguyễn Hiếu Đan, Dương Đức Thắng
Người hướng dẫn	TS. Lê Văn Vinh, ThS. Mai Anh Thơ
Trường học	Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ Án Tốt Nghiệp
Năm xuất bản	2023
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	171
Dung lượng	7,73 MB