Bối cảnh và vấn đề nghiên cứu

Lý do chọn đề tài và bối cảnh thực tiễn

Cùng với sự phát triển của điều kiện kinh tế và đời sống xã hội tại Việt Nam, nhu cầu du lịch, trải nghiệm và khám phá văn hóa của người dân ngày càng gia tăng. Đặc biệt, đối với giới trẻ và những người đam mê hình thức du lịch tự túc ("phượt"), nhu cầu ghi lại hành trình cá nhân, thống kê số lượng tỉnh thành và địa danh đã đặt chân tới, cũng như chia sẻ kỷ niệm trên các nền tảng mạng xã hội trở nên phổ biến.

Tuy nhiên, các hệ thống website du lịch hiện hành phần lớn tập trung vào mục đích thương mại như bán tour trọn gói hoặc đặt phòng khách sạn, thiếu đi các công cụ trực quan hỗ trợ người dùng theo dõi tiến trình khám phá địa lý cá nhân và chia sẻ trải nghiệm thực tế theo từng địa danh cụ thể. Đề tài "Xây dựng website du lịch" được thực hiện nhằm giải quyết nhu cầu tìm hiểu thông tin địa điểm trước chuyến đi, cung cấp công cụ số hóa bản đồ du lịch cá nhân, lưu trữ cảm xúc, hình ảnh, đồng thời hỗ trợ quảng bá các địa danh du lịch địa phương tại Việt Nam.

Mục tiêu và nhiệm vụ nghiên cứu

Đề tài xác định các mục tiêu và nhiệm vụ kỹ thuật cụ thể sau:

  1. Nghiên cứu và làm chủ các công nghệ phát triển ứng dụng web hiện đại gồm Spring MVC, Spring Security, Hibernate Framework và thư viện ReactJS.
  2. Ứng dụng các công nghệ trên để thiết kế, cài đặt và hoàn thiện hệ thống website du lịch tích hợp bản đồ tương tác.
  3. Hiện thực hóa 9 nhóm tính năng chức năng cốt lõi phục vụ người dùng và quản trị viên:
    • Đánh dấu các địa điểm, tỉnh thành người dùng đã từng đi du lịch trên bản đồ trực quan.
    • Tự động tính toán và hiển thị tỷ lệ phần trăm diện tích bản đồ đất nước Việt Nam mà du khách đã khám phá.
    • Lưu giữ bài viết cảm xúc, đánh giá (rating) và trải nghiệm về từng địa danh.
    • Quản lý và lưu trữ album hình ảnh các chuyến đi theo danh mục địa danh và danh mục tỉnh thành.
    • Cung cấp tính năng xem bài viết, hình ảnh, video chia sẻ kinh nghiệm từ cộng đồng ở chế độ công khai.
    • Cung cấp thông tin chi tiết về các địa danh phục vụ du khách chuẩn bị đi du lịch.
    • Cung cấp công cụ tìm kiếm địa danh, bài viết và album thông qua phân hệ "Khám phá".
    • Tích hợp tính năng chia sẻ bản đồ hành trình du lịch thu nhỏ lên mạng xã hội Facebook.
    • Xây dựng phân hệ quản trị (Admin) quản lý người dùng, địa danh, tỉnh thành và kiểm duyệt nội dung bài đăng.

Đối tượng và phạm vi nghiên cứu

  • Đối tượng nghiên cứu: Quy trình quản lý, mô hình dữ liệu bản đồ du lịch tương tác, hệ thống lưu trữ bài viết, hình ảnh hành trình và các giải pháp công nghệ xây dựng ứng dụng web phân tán (Single Page Application kết hợp RESTful Backend).
  • Phạm vi không gian: Bản đồ địa lý hành chính và các địa danh du lịch tại Việt Nam.
  • Thời gian và nhân sự thực hiện: Khóa luận tốt nghiệp kỹ sư ngành Công nghệ Thông tin (chuyên ngành Công nghệ Phần mềm), Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh; thực hiện bởi sinh viên Nguyễn Quang Huy (MSSV: 15110215) và Lê Tấn Khang (MSSV: 15110229) dưới sự hướng dẫn của ThS. Mai Tuấn Khôi; thời gian triển khai từ ngày 05/03/2019 đến ngày 14/07/2019 (kế hoạch 19 tuần).

Cơ sở lý thuyết và phương pháp

Khung công nghệ và kiến trúc

Đề tài sử dụng mô hình kiến trúc phân lớp hướng dịch vụ, tách biệt giữa giao diện người dùng (Frontend) và hệ thống xử lý nghiệp vụ (Backend):

  • Backend Framework: Spring MVC (với cấu trúc 7 module của Spring) chịu trách nhiệm xây dựng các dịch vụ RESTful API; Spring Security quản lý việc xác thực, phân quyền người dùng và bảo mật hệ thống; Hibernate ORM đảm nhận vai trò ánh xạ đối tượng - quan hệ (Object-Relational Mapping) giúp giao tiếp và thao tác với cơ sở dữ liệu quan hệ.
  • Frontend Framework: Thư viện ReactJS dựa trên cơ chế Virtual DOM (Document Object Model ảo) giúp tối ưu hóa hiệu năng kết xuất giao diện; kết hợp cùng thư viện hiển thị bản đồ vector amCharts để dựng và xử lý tương tác bản đồ Việt Nam định dạng SVG.
  • Xác thực: Tích hợp xác thực OAuth qua Facebook Login.

Phương pháp nghiên cứu và phát triển phần mềm

  1. Phương pháp khảo sát hiện trạng: Đánh giá, phân tích ưu điểm và hạn chế của 6 website du lịch đang hoạt động tại Việt Nam: Gody.vn, Mytour.vn, Dulichviet.com.vn, Datviettour.com.vn, Fiditour.com, Travel.com.vn.
  2. Phương pháp phân tích và thiết kế hệ thống:
    • Xây dựng mô hình Use Case xác định các tác nhân và chức năng phần mềm.
    • Sử dụng sơ đồ luồng dữ liệu (Data Flow Diagram - DFD) và sơ đồ tuần tự (Sequence Diagram) để mô hình hóa 14 ca nghiệp vụ chính.
    • Thiết kế cơ sở dữ liệu quan hệ theo các tiêu chí về tính đúng đắn và tính tiến hóa.
  3. Phương pháp kiểm thử phần mềm: Thực hiện kiểm thử chức năng (Black-box testing) trên các màn hình phân hệ Client và Admin; kiểm thử API độc lập bằng công cụ Postman trước khi tích hợp vào giao diện.

Nguồn dữ liệu

Hệ thống sử dụng dữ liệu không gian bản đồ Việt Nam (tọa độ vĩ độ latitude, kinh độ longitude, đường dẫn đồ họa svgPath), danh mục phân cấp hành chính (Region - Tỉnh/Vùng), dữ liệu thuộc tính địa danh du lịch (Place), cùng dữ liệu người dùng và nội dung tương tác (Feeling, Album, Rating) phát sinh trong quá trình vận hành.

Thiết kế và triển khai

Kiến trúc phân tầng và ngăn xếp công nghệ

Hệ thống backend được tổ chức chặt chẽ theo mô hình kiến trúc 3 tầng:

  • Tầng Model (Entity): Khai báo cấu trúc thực thể dữ liệu và các quy tắc ánh xạ Hibernate.
  • Tầng Repository (DAO): Chịu trách nhiệm thực thi các truy vấn tương tác trực tiếp với cơ sở dữ liệu.
  • Tầng Controller (REST API): Tiếp nhận yêu cầu HTTP từ client, điều hướng xử lý nghiệp vụ và trả về kết quả định dạng JSON.

Mô hình dữ liệu quan hệ

Cơ sở dữ liệu của hệ thống gồm 7 bảng thực thể chính được thiết kế chuẩn hóa:

Tên bảng (Entity) Vai trò và mô tả dữ liệu
Role Lưu thông tin các vai trò trong hệ thống (Admin, User).
User Lưu trữ thông tin tài khoản người dùng, mã định danh Facebook, trạng thái hoạt động (ACTIVE, LOCKED).
Region Lưu danh mục các vùng, tỉnh thành tại Việt Nam kèm thông tin đồ họa bản đồ.
Place Lưu thông tin chi tiết về địa danh du lịch (name, title, svgPath, latitude, longitude, regionId).
Feeling Lưu trữ bài viết chia sẻ, cảm nghĩ của người dùng kèm trạng thái (PUBLIC, PRIVATE, ACCEPT).
UserRegion Bảng liên kết theo dõi các tỉnh thành mà từng người dùng đã đi qua để tính tỷ lệ bản đồ.
PlaceUser Bảng liên kết theo dõi chi tiết các địa danh cụ thể mà người dùng đã đánh dấu, chấm điểm hoặc gắn album ảnh.

Quy trình nghiệp vụ tiêu biểu

  • Nghiệp vụ thêm địa danh (Add Place - Admin): Quản trị viên chọn tỉnh thành (Region), sử dụng thao tác "Shift + Click" trực tiếp trên bản đồ tương tác để lấy chính xác tọa độ (latitude, longitude). Hệ thống tự động điền tọa độ vào biểu mẫu, quản trị viên nhập tên, mô tả và đường dẫn SVG. Hệ thống kiểm tra tính hợp lệ (validate các trường bắt buộc và kiểm tra trùng lặp tên) trước khi lưu vào cơ sở dữ liệu qua REST API.
  • Nghiệp vụ hiển thị hành trình (Your Adventure - User): Khi người dùng đăng nhập qua Facebook, hệ thống truy vấn bảng UserRegion và PlaceUser. Bản đồ Việt Nam sẽ tự động tô màu các tỉnh thành đã đi theo cấp độ màu tăng dần dựa trên mức độ khám phá, đồng thời tính toán phần trăm hoàn thành bản đồ đất nước. Khi người dùng nhấp chọn vào một tỉnh, bản đồ tự động phóng to hiển thị các địa danh nội tỉnh, các địa danh đã đi được đánh dấu đỏ.
  • Cơ chế xóa mềm và kiểm duyệt: Hệ thống áp dụng quy định không xóa vật lý trực tiếp đối với người dùng và bài viết. Khi thực hiện Delete User, trạng thái tài khoản chuyển sang LOCKED nhằm ngăn chặn đăng nhập lại; khi thực hiện Delete Post, trạng thái bài viết chuyển từ PUBLIC sang PRIVATE đối với các nội dung vi phạm hoặc nhạy cảm.

Nội dung chính theo từng chương

Chương 1: Khảo sát hiện trạng

Tác giả phân tích nhu cầu du lịch thực tế và tiến hành khảo sát, so sánh tính năng của 6 hệ thống website du lịch phổ biến:

Website khảo sát Ưu điểm ghi nhận Hạn chế ghi nhận
Gody.vn Có tính năng Travel Map đánh dấu nơi đã đi, chia sẻ Facebook, hệ thống blog kinh nghiệm phong phú, hỗ trợ đặt homestay, giao diện responsive tốt. Travel Map chỉ mới đánh dấu ở cấp độ Tỉnh, chưa đánh dấu trực tiếp tại địa danh cụ thể; chưa hỗ trợ lưu trữ video địa danh.
Mytour.vn Giao diện trực quan, sinh động; có hình ảnh, giá vé, dịch vụ khách sạn; hỗ trợ đặt tour trong/ngoài nước; cẩm nang du lịch hữu ích. Thiết kế responsive chưa tối ưu; không có chức năng đánh dấu hành trình du lịch đã đi.
Dulichviet.com.vn Đầy đủ tính năng đặt tour, đặt vé xe, vé máy bay, phòng khách sạn, hỗ trợ thủ tục làm visa, giao diện responsive đẹp. Không có chức năng số hóa và đánh dấu các nơi đã đi du lịch.
Datviettour.com.vn Cung cấp tour đa dạng, hỗ trợ visa, cho thuê xe và tổ chức team building; giao diện bắt mắt. Không có tính năng đánh dấu và lưu giữ bản đồ hành trình du lịch cá nhân.
Fiditour.com Hệ thống tour chất lượng cao trong và ngoài nước; responsive tốt; tích hợp chatbot hỗ trợ người dùng. Bố cục một số phân trang nhiều chữ gây rối mắt; thiếu tính năng đánh dấu nơi đã đi.
Travel.com.vn Bố cục trang web đơn giản, gọn gàng; hỗ trợ tìm kiếm tour và đặt phòng khách sạn. Thiết kế responsive chưa tốt; không hỗ trợ tính năng bản đồ đánh dấu hành trình.

Chương 2: Lập danh sách yêu cầu

Chương này xác định biểu đồ ca sử dụng tổng quát (Use Case Diagram) và phân rã chi tiết yêu cầu chức năng theo 3 nhóm tác nhân:

  • Phân hệ Quản trị viên (Admin): 6 nghiệp vụ chính gồm Xóa người dùng (QD_DeleteUser), Thêm địa danh (QD_AddPlace), Chỉnh sửa thông tin địa danh (QD_EditPlace), Xóa địa danh (QD_DeletePlace), Xóa/Ẩn bài viết (QD_DeletePost), Đăng xuất (QD_Logout).
  • Phân hệ Khách vãng lai (Guest): 4 nghiệp vụ gồm Xem thông tin địa danh/hình ảnh/video công khai (QD_View_Info), Đăng nhập qua Facebook (QD_Login), Tìm kiếm địa danh (QD_Search), Tìm kiếm địa danh theo khu vực/album.
  • Phân hệ Thành viên (User): 6 nghiệp vụ gồm Xem thông tin (QD_View_Info), Chia sẻ bản đồ lên Facebook (QD_Share_Map), Xem bản đồ hành trình cá nhân (QD_View), Lưu cảm xúc/bài viết (QD_Save_Feeling), Lưu album ảnh (QD_Save_album), Đăng xuất (QD_Logout).

Chương 3: Phân tích yêu cầu và thiết kế cơ sở dữ liệu

Tác giả mô hình hóa chi tiết 14 ca nghiệp vụ thông qua sơ đồ luồng dữ liệu (DFD), sơ đồ tuần tự (Sequence Diagram), đặc tả dữ liệu vào/ra (D1 đến D6), thuật toán xử lý và thiết kế các bảng dữ liệu logic. Mỗi thực thể dữ liệu (Place, Feeling, Role, UserRegion, PlaceUser) đều được phân tích trên hai khía cạnh: tính đúng đắn của cấu trúc dữ liệu và khả năng tiến hóa mở rộng hệ thống trong tương lai.

Chương 4: Thiết kế giao diện và xử lý

Tài liệu xây dựng bảng đặc tả chi tiết đối tượng giao diện và logic xử lý tương ứng cho toàn bộ các màn hình của hệ thống:

  • Phân hệ Client (10 nhóm màn hình): Màn hình Trang chủ/Giới thiệu (Intro), Màn hình Login with Facebook, Danh mục album của một địa điểm, Danh mục album của một tỉnh, Màn hình Your Adventure (Bản đồ đánh dấu nơi đã đi), Màn hình Khám phá & Tìm kiếm, Màn hình Rating địa danh, Màn hình Bản đồ chi tiết một khu vực/tỉnh (Map - View a Region), Màn hình Thêm bài post (Write a post), Màn hình Thêm album ảnh.
  • Phân hệ Admin (9 nhóm màn hình): Màn hình Danh sách User, Màn hình Chi tiết User, Màn hình Danh sách bài post của User, Màn hình Danh sách Region, Màn hình Chi tiết Region, Màn hình Danh sách Place của Region, Màn hình Chi tiết Place, Màn hình Cập nhật Place, Màn hình Thêm Place mới.

Chương 5: Cài đặt

Trình bày chi tiết việc hiện thực hóa các công nghệ vào mã nguồn:

  • Phân tích 7 module nền tảng của Spring và mô hình MVC.
  • Cấu hình Hibernate Framework phục vụ truy vấn cơ sở dữ liệu.
  • Xây dựng giao diện ReactJS dựa trên cơ chế Virtual DOM và tích hợp biểu đồ/bản đồ từ thư viện amCharts.
  • Đặc tả sơ đồ lớp (Class Diagram) chi tiết cho 3 tầng: Sơ đồ lớp tầng Model, Sơ đồ lớp tầng Repository và Sơ đồ lớp tầng Controller cho các thực thể Place, Region, User, Role, Feeling, UserRegion, PlaceUser.

Chương 6: Kiểm thử

Chương này tổng hợp các bảng kịch bản kiểm thử (Test Cases) thực tế trên hệ thống:

  • Kiểm thử phân hệ Admin: Màn hình Thêm địa danh (Add Place), Màn hình Danh sách địa danh (List Place), Màn hình Cập nhật địa danh (Update Place), Màn hình Danh sách bài viết (List Post), Màn hình Quản lý người dùng (List User).
  • Kiểm thử phân hệ Client: Màn hình Trang chủ, Màn hình Khám phá, Màn hình Chi tiết thông tin địa danh (Place Info), Màn hình Bản đồ du lịch cá nhân (Map / Your Adventure).

Kết quả và đóng góp

Kết quả kỹ thuật đạt được

  1. Đã xây dựng hoàn chỉnh ứng dụng website du lịch hoạt động ổn định với kiến trúc phân tách Frontend (ReactJS) và Backend (Spring MVC, Spring Security, Hibernate).
  2. Xây dựng thành công tính năng bản đồ tương tác đa cấp: hiển thị tổng quan bản đồ Việt Nam, tự động tô màu theo tiến trình du lịch, tính toán chính xác phần trăm lãnh thổ đã đi qua, hỗ trợ phóng to (zoom-in) từng tỉnh thành để xem và đánh dấu chi tiết từng địa danh du lịch.
  3. Tích hợp thành công cơ chế lấy tọa độ địa lý trực quan (Shift + Click trên bản đồ) giúp quản trị viên thêm địa danh nhanh chóng mà không cần tra cứu thủ công tọa độ bên ngoài.
  4. Triển khai đầy đủ hệ thống quản lý nội dung đa phương tiện (bài viết chia sẻ cảm xúc, album hình ảnh) có phân quyền chế độ hiển thị (PUBLIC, PRIVATE) và kết nối chia sẻ trực tiếp lên mạng xã hội Facebook.

Đóng góp so với các hệ thống khảo sát

Khóa luận đã khắc phục được nhược điểm lớn nhất của các website du lịch hiện có tại thời điểm nghiên cứu (chẳng hạn như Gody.vn chỉ dừng lại ở việc đánh dấu cấp tỉnh): hệ thống này cho phép người dùng đánh dấu chi tiết đến từng địa danh cụ thể nằm trong tỉnh thành đó, đồng thời trực quan hóa toàn bộ trải nghiệm khám phá bằng bản đồ màu và tỷ lệ phần trăm cụ thể.

Hạn chế và hướng nghiên cứu tiếp

Hạn chế tồn tại

  • Chức năng lưu trữ và phát video về các địa danh du lịch chưa được tối ưu hóa toàn diện trong phiên bản hiện tại.
  • Hệ thống dữ liệu địa danh ban đầu cần tiếp tục được cập nhật đầy đủ hơn cho tất cả các vùng miền trên cả nước.
  • Ứng dụng mới chỉ phát triển trên nền tảng web, chưa có ứng dụng di động (Mobile App) độc lập để người dùng tiện check-in trực tiếp tại hiện trường.

Hướng phát triển tiếp theo

  • Hoàn thiện và nâng cấp tính năng lưu trữ, phát video hành trình cho từng địa danh du lịch.
  • Tối ưu hóa giao diện người dùng và nâng cao trải nghiệm tương tác bản đồ mượt mà hơn.
  • Mở rộng kho cơ sở dữ liệu về các địa danh, cẩm nang du lịch và tích hợp thêm các dịch vụ tiện ích hỗ trợ chuyến đi.

Giá trị tham khảo

Báo cáo khóa luận là tài liệu tham khảo có giá trị chuyên môn cao cho:

  • Sinh viên chuyên ngành Công nghệ phần mềm / Công nghệ thông tin: Tham khảo mô hình mẫu về việc kết hợp ngăn xếp công nghệ Java Backend (Spring MVC, Spring Security, Hibernate ORM) với Single Page Application Frontend (ReactJS).
  • Người phát triển ứng dụng bản đồ tương tác: Cung cấp tài liệu chi tiết về giải pháp tích hợp thư viện amCharts, xử lý bản đồ định dạng vector SVG và kỹ thuật bắt tọa độ địa lý trực tiếp trên giao diện web.
  • Quy trình công nghệ phần mềm chuẩn mực: Đáng tham khảo ở phương pháp mô hình hóa nghiệp vụ đầy đủ từ khảo sát hiện trạng, biểu đồ ca sử dụng, sơ đồ luồng dữ liệu (DFD), sơ đồ tuần tự (Sequence Diagram), thiết kế cơ sở dữ liệu quan hệ đến xây dựng ca kiểm thử (Test Cases) chi tiết cho cả hai phân hệ Admin và Client.

Câu hỏi thường gặp

1. Hệ thống sử dụng giải pháp nào để người dùng quản trị lấy tọa độ khi thêm một địa danh mới?

Tại màn hình "Add Place" của phân hệ Admin, quản trị viên chọn khu vực tỉnh thành muốn thêm địa danh, sau đó thực hiện thao tác "Shift + Click" trực tiếp vào vị trí của địa danh trên bản đồ tương tác. Hệ thống sẽ tự động bắt tọa độ (kinh độ longitude, vĩ độ latitude) và tự động điền vào hai ô nhập liệu tương ứng trên biểu mẫu.

2. Dữ liệu tài khoản người dùng và bài viết có bị xóa hoàn toàn khỏi cơ sở dữ liệu khi thực hiện thao tác xóa không?

Không. Hệ thống áp dụng cơ chế xóa mềm:

  • Khi Admin xóa người dùng (QD_DeleteUser), hệ thống không xóa bản ghi trong database mà chỉ chuyển trạng thái của tài khoản sang LOCKED để ngăn chặn tài khoản đó đăng nhập vào hệ thống.
  • Khi Admin xóa bài viết (QD_DeletePost), hệ thống chuyển trạng thái bài viết từ PUBLIC sang PRIVATE nhằm ẩn các bài đăng có nội dung nhạy cảm khỏi giao diện công khai.

3. Tỷ lệ phần trăm khám phá đất nước của người dùng được tính toán và hiển thị như thế nào?

Tính năng "Your Adventure" dựa trên các bảng liên kết UserRegion và PlaceUser để ghi nhận các tỉnh thành và địa danh mà người dùng đã đánh dấu. Hệ thống tự động tính toán tổng số vùng đã đi trên tổng số đơn vị địa lý của Việt Nam để hiển thị ra tỷ lệ phần trăm, đồng thời tô màu các tỉnh đã đi với độ đậm tăng dần theo mức độ trải nghiệm trên bản đồ vector amCharts.

4. Hệ thống backend được xây dựng bằng những công nghệ chính nào và kiểm thử API bằng công cụ gì?

Backend được xây dựng trên nền tảng Java sử dụng framework Spring MVC (với 7 module nền tảng), tích hợp Spring Security để phân quyền và xác thực người dùng, cùng Hibernate ORM để ánh xạ và quản lý cơ sở dữ liệu quan hệ. Toàn bộ các RESTful API của các phân hệ (User, Place, Region, PlaceUser, Album, Feeling) được kiểm thử độc lập thông qua công cụ Postman trước khi tích hợp vào giao diện ReactJS.

Kết luận

Khóa luận tốt nghiệp "Xây dựng website du lịch" của sinh viên Nguyễn Quang Huy và Lê Tấn Khang đã hoàn thành đầy đủ các mục tiêu đề ra, giải quyết tốt bài toán số hóa hành trình và bản đồ du lịch cá nhân tại Việt Nam. Đề tài xây dựng thành công kiến trúc web hiện đại kết hợp giữa Spring MVC, Hibernate, ReactJS và thư viện bản đồ amCharts, cung cấp hệ thống tính năng trực quan từ quản lý địa danh, chia sẻ bài viết đến tính toán tỷ lệ khám phá đất nước. Toàn bộ quy trình phân tích yêu cầu, thiết kế dữ liệu, cài đặt hệ thống và kiểm thử chức năng được trình bày khoa học, tạo nguồn tài liệu tham khảo có giá trị ứng dụng cao cho các đề tài phát triển phần mềm du lịch và bản đồ số.