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

Ngành du lịch đóng vai trò là ngành kinh tế dịch vụ quan trọng tại nhiều quốc gia, trong đó có Việt Nam. Hoạt động du lịch đáp ứng nhu cầu giải trí, nâng cao hiểu biết, thúc đẩy giao lưu văn hóa và hỗ trợ sự phát triển kinh tế - xã hội. Tuy nhiên, giai đoạn đại dịch Covid-19 bùng phát—đặc biệt là đợt dịch thứ tư vào đầu mùa hè năm 2021—đã khiến các hoạt động du lịch gần như rơi vào trạng thái ngưng trệ. Sau các đợt dịch, hành vi tiêu dùng và nhu cầu du lịch của người dân có sự thay đổi rõ rệt và ngày một gia tăng. Dù nhu cầu đi lại, trải nghiệm tăng cao, nhiều người dùng vẫn gặp khó khăn trong việc tìm kiếm và lựa chọn địa điểm phù hợp do thiếu hụt các kênh thông tin tập trung, trực quan và dễ tiếp cận.

Trước thực tiễn đó, đồ án tốt nghiệp "Xây dựng ứng dụng nền tảng web giới thiệu các địa điểm du lịch" được tác giả Đinh Văn Phóng thực hiện dưới sự hướng dẫn của TS. Lương Thanh Nhạn tại Trường Đại học Quản lý và Công nghệ Hải Phòng (ngành Công nghệ Thông tin, khóa tốt nghiệp năm 2024).

Mục tiêu tổng quát của đề tài là xây dựng một trang web hỗ trợ quảng bá và giới thiệu các địa điểm du lịch trên môi trường Internet, cung cấp thông tin phù hợp với nhu cầu tra cứu của người dùng. Để hoàn thành mục tiêu này, nhiệm vụ nghiên cứu được phân định thành 4 nội dung cụ thể:

  1. Tìm hiểu hiện trạng và bài toán giới thiệu địa điểm du lịch trực tuyến.
  2. Thực hiện phân tích, thiết kế hệ thống và mô hình hóa cơ sở dữ liệu.
  3. Cài đặt ứng dụng web, tích hợp công nghệ lưu trữ và tiến hành thử nghiệm các chức năng.
  4. Nhận xét, đánh giá kết quả thực hiện và đề xuất hướng phát triển.

Đối tượng nghiên cứu của đồ án là người dùng có nhu cầu tìm hiểu thông tin du lịch và quản trị viên quản lý nội dung bài viết. Phạm vi nghiên cứu tập trung vào việc xây dựng nền tảng web giới thiệu địa điểm du lịch tại Việt Nam, phân loại nội dung bài viết theo các vùng miền (Miền Bắc, Miền Trung, Miền Nam), cung cấp giao diện tương tác và hệ quản trị nội dung bài đăng.

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

Đồ án vận dụng các cơ sở lý thuyết về kiến trúc phần mềm, phương pháp phân tích thiết kế hệ thống hướng đối tượng và công nghệ web hiện đại để hiện thực hóa bài toán:

  • Kiến trúc Client - Server: Hệ thống được tổ chức theo mô hình phân tách giữa phía máy khách (Client) và máy chủ (Server), đảm bảo việc truyền tải và xử lý dữ liệu thông qua các giao diện lập trình ứng dụng (API).
  • Phương pháp phân tích và thiết kế hệ thống: Tác giả sử dụng ngôn ngữ mô hình hóa thống nhất (UML) để xây dựng hệ thống biểu đồ bao gồm: Biểu đồ Use Case (tổng quát và chi tiết), Biểu đồ tuần tự (Sequence Diagram), Biểu đồ cộng tác (Collaboration Diagram), Biểu đồ lớp thực thể (Class Diagram), Mô hình quan hệ và Mô hình thực thể liên kết (Entity-Relationship - ER).
  • Phương pháp khảo sát và thu thập dữ liệu: Khảo sát nhu cầu người dùng về việc tìm kiếm thông tin địa điểm du lịch, xác định các chủ đề quan tâm, thói quen tương tác với bài viết và thu thập dữ liệu về các danh lam thắng cảnh phân theo ba miền Bắc - Trung - Nam.
  • Nguồn dữ liệu: Tài liệu chuyên ngành về hệ quản trị cơ sở dữ liệu, tài liệu công nghệ lập trình web JavaScript, các trang web giới thiệu du lịch hiện hành và dữ liệu nội dung, hình ảnh địa danh du lịch tại Việt Nam.

Thiết kế và triển khai hệ thống

Hệ thống được thiết kế hoàn chỉnh từ việc xác định kiến trúc công nghệ, phân quyền chức năng, mô hình hóa dữ liệu đến xây dựng giao diện người dùng và quản trị.

1. Kiến trúc công nghệ và môi trường triển khai

Thành phần Công nghệ / Công cụ sử dụng Vai trò trong hệ thống
Giao diện (Frontend) ReactJS, TailwindCSS Xây dựng giao diện người dùng tương tác dạng Single Page Application, định dạng bố cục và phản hồi trực quan.
Quản lý trạng thái Redux Quản lý và đồng bộ hóa luồng dữ liệu trạng thái trên toàn bộ ứng dụng web.
Xử lý phía máy chủ (Backend) Node.js (V8 Engine) Xây dựng dịch vụ máy chủ, xử lý các tiến trình không đồng bộ (Asynchronous/Event-Driven) và cung cấp API.
Cơ sở dữ liệu MongoDB, MongoDB Compass Hệ quản trị cơ sở dữ liệu NoSQL lưu trữ tài liệu; MongoDB Compass đóng vai trò giao diện đồ họa (GUI) quản lý và truy vấn.
Lưu trữ đa phương tiện Cloudinary Dịch vụ đám mây chuyên dụng để upload và lưu trữ hình ảnh bài viết du lịch.
Môi trường phát triển Visual Studio Code (VSCode) Trình soạn thảo mã nguồn tích hợp công cụ gỡ lỗi và quản lý phiên bản.

2. Thiết kế dữ liệu và các thực thể hệ thống

Hệ thống cơ sở dữ liệu MongoDB được thiết kế gồm 3 thực thể (Collection) chính:

  • Thực thể Users (Người dùng và Quản trị viên):
    • Thuộc tính: username (chuỗi), Email (chuỗi), password (chuỗi), admin (phân quyền: mặc định là User hoặc quyền Quản trị).
    • Phương thức xử lý: DangKy() (khởi tạo giao diện đăng ký tài khoản với các trường dữ liệu), DangNhap() (xác thực tên đăng nhập và mật khẩu).
  • Thực thể Blogs (Bài viết giới thiệu địa điểm):
    • Thuộc tính: title (tiêu đề bài viết), time (thời gian đăng), description (nội dung mô tả chi tiết), note (ghi chú bổ sung), zones (phân loại vùng miền: Bắc, Trung, Nam), imgList (danh sách tệp hình ảnh lưu trữ qua Cloudinary).
    • Phương thức xử lý: TaoMoi() (tiếp nhận thông tin tạo bài viết mới), SuaAnBaiViet() (đưa thông tin lên biểu mẫu để chỉnh sửa hoặc thay đổi trạng thái ẩn), KhoiPhucXoaBaiViet() (xử lý logic khôi phục hoặc xóa dữ liệu).
  • Thực thể Comments (Bình luận bài viết):
    • Thuộc tính: Nội dung bình luận (comment), liên kết định danh tới bài viết và người dùng.
    • Phương thức xử lý: BinhLuan() (tiếp nhận chuỗi văn bản bình luận từ người dùng đã đăng nhập và hiển thị dưới bài viết).

3. Phân tích chức năng và đặc tả Use Case

Hệ thống phân định rõ hai nhóm tác nhân: Người dùng (User) và Quản trị viên (Admin).

Nhóm tác nhân Tên Use Case Điều kiện tiên quyết Mô tả luồng xử lý chính
User Xem thông tin Truy cập website Người dùng truy cập trang chủ hoặc danh mục vùng miền để đọc bài viết.
User Tìm kiếm bài viết Truy cập ô tìm kiếm Nhập từ khóa cần tra cứu; hệ thống trả về danh sách bài viết tương ứng hoặc thông báo không tìm thấy.
User Đăng ký tài khoản Chưa có tài khoản Nhập Email, Username, Password; hệ thống kiểm tra trùng lặp và tạo tài khoản mới.
User Đăng nhập Đã có tài khoản Nhập Username và Password; hệ thống xác thực và chuyển hướng về trang trước đó.
User Bình luận bài viết Đã đăng nhập thành công Nhập nội dung vào khung bình luận tại trang chi tiết bài viết; hệ thống ghi nhận và hiển thị.
Admin Đăng nhập Admin Tài khoản có quyền Admin Nhập thông tin quản trị; xác thực thành công đưa đến giao diện điều khiển quản trị.
Admin Đăng bài viết mới Đã đăng nhập Admin Điền tiêu đề, thời gian, mô tả, chọn vùng miền (zones) và tải ảnh lên Cloudinary (imgList).
Admin Sửa bài viết Chọn bài viết từ danh sách Mở biểu mẫu chứa dữ liệu cũ, chỉnh sửa các trường thông tin và lưu cập nhật.
Admin Ẩn bài viết Chọn bài viết từ danh sách Xác nhận ẩn bài viết để tạm thời không hiển thị phía người dùng.
Admin Khôi phục bài viết Truy cập danh sách bài đã ẩn Chọn bài viết đã ẩn và chuyển trạng thái về danh sách bài viết hiển thị công khai.
Admin Xóa vĩnh viễn Truy cập danh sách bài đã ẩn Xác nhận cảnh báo xóa; hệ thống loại bỏ hoàn toàn dữ liệu bài viết khỏi cơ sở dữ liệu.

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

Mở đầu

Phần mở đầu nêu rõ tầm quan trọng của ngành du lịch trong nền kinh tế và đời sống xã hội; phân tích bối cảnh biến động của ngành sau 4 đợt bùng phát dịch Covid-19 (đặc biệt là đợt dịch mùa hè năm 2021). Từ sự thay đổi hành vi tiêu dùng và nhu cầu tiếp cận thông tin du lịch trực tuyến, tác giả xác định mục đích, phương pháp nghiên cứu, phạm vi và đối tượng của đồ án.

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

Chương này đánh giá hiện trạng các nền tảng giới thiệu du lịch trực tuyến, sự tham gia của các mạng xã hội (Instagram, Facebook) trong việc chia sẻ trải nghiệm điểm đến. Tác giả phát biểu bài toán xây dựng website cung cấp thông tin du lịch phân theo vùng miền với giao diện thân thiện. Đồng thời, chương 1 xác định các yêu cầu chức năng (trang chủ, bài viết chi tiết, tìm kiếm, bình luận, quản trị nội dung, liên kết mạng xã hội) và trình bày tổng quan về các công nghệ cài đặt gồm Node.js, MongoDB Compass và Visual Studio Code.

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

Chương 2 trình bày toàn bộ quá trình khảo sát và mô hình hóa hệ thống thông tin:

  • Khảo sát nhu cầu người dùng về chủ đề bài viết và cấu trúc phân vùng du lịch.
  • Xây dựng sơ đồ tiến trình nghiệp vụ chung và chi tiết cho các luồng: Đăng ký, Đăng nhập (User/Admin), Bình luận, Tạo mới, Sửa, Ẩn, Khôi phục và Xóa vĩnh viễn bài viết.
  • Thiết kế hệ thống biểu đồ UML chi tiết: Biểu đồ Use Case tổng quát và chi tiết; 10 biểu đồ tuần tự (Hình 2.14 đến 2.23); 10 biểu đồ cộng tác (Hình 2.24 đến 2.33).
  • Xây dựng biểu đồ lớp thực thể cho 3 đối tượng Users, Blogs, Comments; thiết lập mô hình quan hệ, mô hình thực thể ER và bảng thuộc tính chi tiết của các collection.

Chương 3: Cài đặt chương trình và thử nghiệm

Chương 3 mô tả việc hiện thực hóa các thiết kế vào môi trường thực tế và hiển thị kết quả giao diện chương trình:

  • Môi trường cài đặt kết hợp ReactJS, TailwindCSS, Redux, Node.js, MongoDB và Cloudinary.
  • Thử nghiệm và minh chứng các giao diện thực thi: Giao diện Trang chủ (Hình 3.1), Giao diện Đăng ký (Hình 3.2), Giao diện Đăng nhập (Hình 3.3), Giao diện phân loại địa điểm du lịch Miền Bắc (Hình 3.4), Miền Trung (Hình 3.5), Miền Nam (Hình 3.6), Giao diện Bài viết chi tiết kèm khung bình luận (Hình 3.7), Giao diện Đăng nhập Admin (Hình 3.8), Giao diện Quản trị tạo mới bài viết (Hình 3.9), Giao diện Quản trị Danh sách bài viết (Hình 3.10) và Giao diện Quản trị Tạo mới danh sách bài viết (Hình 3.11).

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

Đánh giá tổng kết mức độ hoàn thành nhiệm vụ theo đề cương đồ án tốt nghiệp, khẳng định các chức năng đã xây dựng đáp ứng yêu cầu đặt ra và nêu định hướng hoàn thiện hệ thống trong tương lai.

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

1. Kết quả chính đạt được

  • Về mặt tài liệu và thiết kế: Xây dựng đầy đủ bộ tài liệu phân tích thiết kế hệ thống hướng đối tượng với quy trình nghiệp vụ rõ ràng, hệ thống hóa chi tiết từ Use Case, biểu đồ tương tác (Sequence/Collaboration Diagrams) đến biểu đồ lớp và mô hình ER.
  • Về mặt sản phẩm phần mềm:
    • Triển khai thành công ứng dụng web hoạt động theo mô hình Client - Server với giao diện trực quan, đồng bộ bố cục và màu sắc.
    • Phân loại rõ ràng nội dung du lịch theo 3 phân vùng địa lý: Miền Bắc, Miền Trung và Miền Nam.
    • Hoàn thiện luồng tương tác người dùng: Tìm kiếm bài viết theo từ khóa, đăng ký tài khoản, đăng nhập phân quyền và chức năng gửi bình luận trực tiếp dưới bài viết.
    • Xây dựng hoàn chỉnh phân hệ quản trị nội dung (Admin CMS) cho phép thực hiện đầy đủ vòng đời bài viết: Đăng mới (upload ảnh qua Cloudinary), Chỉnh sửa nội dung, Ẩn bài viết, Khôi phục bài viết đã ẩn và Xóa vĩnh viễn khỏi cơ sở dữ liệu.

2. Giải pháp và đóng góp của đề tài

  • Ứng dụng giải pháp quản lý cơ sở dữ liệu NoSQL (MongoDB) phân tách thành các collection chuyên biệt (Users, Blogs, Comments), tối ưu hóa việc mở rộng cấu trúc dữ liệu bài viết du lịch.
  • Tích hợp giải pháp lưu trữ đám mây Cloudinary nhằm giảm tải tài nguyên lưu trữ hình ảnh trực tiếp trên máy chủ cục bộ.
  • Kết hợp thư viện Redux cùng ReactJS và TailwindCSS giúp việc quản lý trạng thái luồng dữ liệu tập trung, nâng cao hiệu năng phản hồi giao diện và tối ưu trải nghiệm người dùng khi tra cứu thông tin du lịch.

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

  • Hạn chế: Hệ thống hiện tập trung chủ yếu vào việc cung cấp thông tin bài viết và tương tác bình luận cơ bản theo phân vùng miền; chưa tích hợp các dịch vụ nâng cao như bản đồ số tương tác trực tiếp, đặt tour du lịch, đặt phòng hoặc tích hợp cổng thanh toán trực tuyến.
  • Hướng phát triển: Mở rộng các tính năng tương tác đa chiều cho người dùng, phát triển hệ thống gợi ý địa điểm thông minh dựa trên sở thích cá nhân, hoàn thiện phân quyền nâng cao cho nhiều cấp quản trị và tối ưu hóa hệ thống trên các nền tảng thiết bị di động.

Giá trị tham khảo

Đồ án là tài liệu tham khảo phù hợp cho:

  • Sinh viên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm: Tham khảo cấu trúc hoàn chỉnh của một đồ án tốt nghiệp ứng dụng công nghệ web JavaScript Fullstack (ReactJS, Node.js, MongoDB).
  • Người học phân tích thiết kế hệ thống: Đáng tham khảo ở cách thức mô hình hóa quy trình nghiệp vụ từ bài toán thực tế thành hệ thống biểu đồ UML hoàn chỉnh (đặc tả Use Case chi tiết, biểu đồ tuần tự, biểu đồ cộng tác và biểu đồ lớp thực thể).
  • Lập trình viên phát triển web: Cung cấp phương án tổ chức ứng dụng web giới thiệu thông tin, quản lý nội dung bài viết và tích hợp lưu trữ media đám mây qua Cloudinary.

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

1. Hệ thống sử dụng công nghệ nào để lưu trữ dữ liệu văn bản và hình ảnh?
Dữ liệu văn bản (tài khoản, bài viết, bình luận) được lưu trữ trong cơ sở dữ liệu NoSQL MongoDB và quản lý trực quan qua MongoDB Compass. Dữ liệu hình ảnh được lưu trữ và quản lý thông qua dịch vụ đám mây Cloudinary.

2. Quản trị viên (Admin) quản lý trạng thái ẩn/xóa của bài viết theo quy trình nào?
Khi quản trị viên chọn "Ẩn", bài viết sẽ ngừng hiển thị ở trang người dùng và chuyển vào mục "Danh sách bài viết đã ẩn". Tại mục này, quản trị viên có thể chọn "Khôi phục" để đưa bài viết trở lại danh sách hiển thị công khai, hoặc chọn "Xóa vĩnh viễn" để xóa hoàn toàn khỏi cơ sở dữ liệu sau khi xác nhận.

3. Cơ sở dữ liệu của hệ thống gồm những thực thể chính nào và các trường thông tin cơ bản là gì?
Cơ sở dữ liệu gồm 3 thực thể chính: Users (username, Email, password, admin), Blogs (title, time, description, note, zones, imgList) và Comments (comment cùng liên kết bài viết/người dùng).

4. Người dùng chưa đăng nhập có thể thực hiện những chức năng nào trên website?
Người dùng chưa đăng nhập có thể xem thông tin trang chủ, tra cứu và đọc bài viết chi tiết phân theo vùng miền (Bắc, Trung, Nam), sử dụng chức năng tìm kiếm bài viết và thực hiện đăng ký tài khoản. Để gửi bình luận vào bài viết, hệ thống yêu cầu người dùng phải đăng nhập.

5. Đồ án phân chia cấu trúc nội dung giới thiệu du lịch theo tiêu chí nào?
Nội dung bài viết giới thiệu địa điểm du lịch trên website được tổ chức và phân loại theo tiêu chí vùng miền địa lý của Việt Nam, bao gồm 3 khu vực chính: Miền Bắc, Miền Trung và Miền Nam.

Kết luận

Đồ án tốt nghiệp "Xây dựng ứng dụng nền tảng web giới thiệu các địa điểm du lịch" của sinh viên Đinh Văn Phóng đã giải quyết thành công bài toán quảng bá thông tin du lịch trực tuyến sau giai đoạn đại dịch Covid-19. Tác giả đã hoàn thành đầy đủ quy trình kỹ thuật từ khảo sát nhu cầu, phân tích thiết kế hệ thống theo chuẩn UML đến xây dựng hoàn chỉnh ứng dụng web bằng các công nghệ ReactJS, Node.js, MongoDB và Cloudinary. Hệ thống đáp ứng tốt các yêu cầu chức năng tra cứu thông tin theo vùng miền cho người dùng cũng như cung cấp công cụ quản trị nội dung bài viết chặt chẽ cho người quản trị. Đồ án là tài liệu tham khảo có giá trị thực tiễn cao cho sinh viên ngành Công nghệ Thông tin trong việc thiết kế và phát triển các hệ thống web tin tức và dịch vụ du lịch.