Bối cảnh và vấn đề nghiên cứu
Trong bối cảnh ngành du lịch phát triển mạnh mẽ, nhu cầu đi lại, khám phá danh lam thắng cảnh, tìm hiểu văn hóa và ẩm thực của du khách ngày càng gia tăng. Tuy nhiên, việc tiếp cận nguồn thông tin du lịch đáng tin cậy vẫn còn nhiều rào cản. Tác giả chỉ ra rằng các nền tảng mạng xã hội phổ biến hiện nay như Facebook hay Instagram hoạt động trên đa lĩnh vực, khiến người dùng gặp khó khăn trong việc chắt lọc các kênh chuyên biệt và có độ xác thực cao về du lịch. Mặt khác, phần lớn các trang web du lịch hiện hành chủ yếu đóng vai trò làm đại lý thương mại, phục vụ việc đặt tour hoặc bán dịch vụ theo đoàn, chưa đáp ứng tốt nhu cầu tìm kiếm thông tin thực tế của nhóm du khách tự túc và khách quốc tế.
Xuất phát từ thực tiễn trên, đề tài đồ án tốt nghiệp "Xây dựng mạng xã hội We-travel hỗ trợ người du lịch" được thực hiện với các mục tiêu và nhiệm vụ nghiên cứu cụ thể:
- Mục tiêu nghiên cứu: Xây dựng một hệ thống mạng xã hội chuyên biệt trên nền tảng web, cung cấp kênh thông tin du lịch đáng tin cậy thông qua bản đồ trực quan, cho phép người dùng đăng tải bài viết, chia sẻ cảm nghĩ, đánh giá địa điểm, tương tác và trò chuyện trực tuyến theo thời gian thực.
- Nhiệm vụ nghiên cứu (theo thuyết minh đề tài):
- Giới thiệu đề tài và làm rõ tính thiết thực của hệ thống trong thực tiễn du lịch.
- Nghiên cứu cơ sở lý thuyết cùng các công nghệ nền tảng phục vụ phát triển ứng dụng web và xử lý dữ liệu thời gian thực.
- Phân tích yêu cầu, đặc tả các ca sử dụng (use case), xây dựng sơ đồ tuần tự và thiết kế cơ sở dữ liệu cho hệ thống.
- Triển khai lập trình, tích hợp hệ thống, thực hiện demo giao diện và đánh giá các chức năng đã hoàn thiện.
- Đối tượng nghiên cứu: Khách du lịch, đặc biệt hướng đến đối tượng du khách du lịch tự túc và phượt thủ có nhu cầu tìm kiếm, chia sẻ thông tin địa điểm độc lập.
- Phạm vi nghiên cứu:
- Không gian: Hệ thống phần mềm web mạng xã hội hỗ trợ hiển thị dữ liệu địa điểm du lịch trên bản đồ số, kết nối người dùng thông qua mạng Internet.
- Thời gian thực hiện: Từ ngày 05/09/2019 đến ngày 20/12/2019, tại Khoa Công nghệ Thông tin, Trường Đại học Bách Khoa – Đại học Đà Nẵng.
Cơ sở lý thuyết và phương pháp
Đồ án tổng hợp và áp dụng các nền tảng công nghệ phần mềm hiện đại để giải quyết bài toán mạng xã hội tương tác thời gian thực:
- Node.js và Express: Nền tảng thực thi JavaScript phía máy chủ xây dựng trên V8 JavaScript Engine của Google Chrome, sử dụng mô hình hướng sự kiện (event-driven) và kiến trúc non-blocking I/O đơn luồng, tối ưu cho các tác vụ xử lý đồng thời và các ứng dụng thời gian thực. Đồ án tham chiếu trường hợp chuyển đổi của LinkedIn từ Ruby sang Node.js cho dịch vụ di động, giúp cắt giảm số lượng máy chủ từ 30 xuống còn 3 (giảm gần 90%). Framework Express được sử dụng để định tuyến và xây dựng các dịch vụ RESTful API.
- React.js và Redux: Thư viện giao diện người dùng dựa trên cấu trúc component, cơ chế Virtual DOM tối ưu hóa việc cập nhật giao diện và luồng dữ liệu một chiều (one-way data binding). Cú pháp JSX được dùng để kết hợp mã hiển thị trong JavaScript. Redux đóng vai trò quản lý trạng thái tập trung dựa trên 3 nguyên lý: Single Source of Truth (Store duy nhất), State is read-only (chỉ thay đổi qua Action), và thay đổi trạng thái thông qua các hàm thuần túy (Reducer).
- Kiến trúc RESTful API: Chuẩn thiết kế dịch vụ web quản lý tài nguyên thông qua các phương thức HTTP chuẩn (GET, POST, PUT, DELETE) tương ứng với các thao tác CRUD. Định dạng dữ liệu trao đổi sử dụng JSON. Cơ chế xác thực không sử dụng session/cookie truyền thống mà dùng chuỗi token truy cập (Access Token / JSON Web Token - JWT) kèm theo mỗi yêu cầu.
- MongoDB: Hệ quản trị cơ sở dữ liệu NoSQL hướng tài liệu (document-oriented), lưu trữ bản ghi dưới cấu trúc tài liệu tương tự JSON/BSON trong các bộ sưu tập (collection), cho phép cấu trúc dữ liệu linh hoạt, hỗ trợ truy vấn tốc độ cao mà không bị ràng buộc bởi lược đồ cứng nhắc như các hệ quản trị quan hệ (RDBMS).
- Giao thức WebSocket và Socket.IO: Công nghệ truyền thông hai chiều toàn phần (full-duplex) qua một kết nối TCP duy nhất. Tác giả phân tích sự vượt trội về dung lượng header: trong khi yêu cầu HTTP chiếm khoảng 871 byte header, WebSocket chỉ tiêu tốn 2 byte sau khi bắt tay (handshake). Quá trình bắt tay sử dụng khóa
Sec-WebSocket-Key, kết hợp với chuỗi định danh GUID 258EAFA5-E914-47DA-95CA-C5AB0DC85B11, mã hóa SHA-1 và chuyển đổi Base64 thành Sec-WebSocket-Accept với mã phản hồi HTTP 101 Switching Protocols.
| Tiêu chí kỹ thuật |
Giao thức HTTP (với Ajax/Polling) |
Giao thức WebSocket |
| Kích thước header sau kết nối |
~871 byte / lượt |
~2 byte / lượt |
| Lưu lượng header (10.000 user/giây) |
8.710.000 byte/s (~66 Mbps) |
20.000 byte/s (~0.153 Kbps) |
| Phương thức truyền thông |
Bán song công (Half-duplex), Request - Response |
Song công hai chiều (Full-duplex), Persistent TCP |
- Thư viện bản đồ Mapbox GL và hiển thị ảnh 360 độ: Mapbox GL hiển thị bản đồ vector động dựa trên OpenGL với dữ liệu nền Mapbox Streets từ OpenStreetMap; thư viện Pannellum hỗ trợ kết xuất hình ảnh thực tế ảo 360 độ cho các địa điểm du lịch.
- Phương pháp nghiên cứu thực tế: Nghiên cứu tài liệu kỹ thuật và mã nguồn mở trên Internet; áp dụng phương pháp phân tích thiết kế hướng đối tượng qua sơ đồ ca sử dụng và sơ đồ tuần tự; phương pháp thiết kế kiến trúc phần mềm phân tầng client-server; phương pháp kiểm thử thực nghiệm chức năng trên môi trường web.
- Nguồn dữ liệu: Hồ sơ thuyết minh xác định rõ mục số liệu và dữ liệu ban đầu là "Không có". Dữ liệu hệ thống phát sinh từ quá trình người dùng khởi tạo nội dung, đề xuất địa điểm, đăng bài, bình luận, đánh giá vote và quản trị viên quản lý danh mục.
Thiết kế và triển khai
Hệ thống We-travel được xây dựng theo mô hình kiến trúc phân tách Client - Server, kết hợp giữa dịch vụ RESTful API và máy chủ socket thời gian thực.
Kiến trúc và nguyên lý hoạt động
Ứng dụng phía máy khách (Web Client) được đóng gói dưới dạng Single Page Application (SPA) bằng React.js, quản lý luồng dữ liệu thông qua Redux Store. Phía máy chủ (Backend) sử dụng Node.js phối hợp với Express để cung cấp các API endpoint cho các thao tác CRUD và Socket.IO Server để duy trì kết nối persistent socket với các SocketClient.
Khi người dùng thực hiện đăng nhập thành công, máy chủ xác thực tài khoản từ cơ sở dữ liệu MongoDB và trả về chuỗi mã JWT Token. Phía client lưu trữ token này để đính kèm vào HTTP Header trong các yêu cầu RESTful API tiếp theo. Đồng thời, SocketClient khởi tạo kết nối đến SocketServer kèm theo token; máy chủ xác thực danh tính và ánh xạ mã kết nối socketId vào hồ sơ của người dùng. Khi phát sinh các sự kiện tương tác như gửi tin nhắn hay bình luận bài viết, SocketServer tiếp nhận gói tin, xử lý lưu trữ vào cơ sở dữ liệu và phát thông điệp tức thời đến các máy khách tương ứng.
Cơ sở dữ liệu hệ thống
Hệ thống thiết kế 11 bảng dữ liệu (collection) trong MongoDB để lưu trữ toàn bộ thực thể và các mối quan hệ:
| Tên Collection |
Khóa chính / Khóa ngoại tiêu biểu |
Các trường thông tin chính |
Trạng thái / Ghi chú |
| Category |
_id (ObjectId) |
key_parent, key, name, slug, createdAt, updatedAt |
status: activated, pending, rejected |
| Place |
_id (ObjectId), categories (Array ObjectId) |
name, description, slug, longitude, latitude, images, tags |
status, thời gian tạo và cập nhật |
| Vote |
_id, id_user (ref User), id_place (ref Place) |
rating (kiểu số nguyên từ 1 đến 5), createdAt, updatedAt |
Lưu điểm đánh giá địa điểm |
| Like |
_id, id_post (ref Post), id_uer (ref User) |
createdAt, updatedAt |
Lưu lượt thích bài viết |
| Post |
_id, id_place (ref Place), id_uer (ref User) |
content, images (Array Object), status, createdAt, updatedAt |
Nội dung bài đăng và hình ảnh đính kèm |
| Comment |
_id, id_place, id_uer, id_post |
content, status, createdAt, updatedAt |
Bình luận tại bài viết hoặc địa điểm |
| Follow |
_id, id_user (ref User), id_uer_follow (ref User) |
createdAt, updatedAt |
Thiết lập liên kết theo dõi giữa 2 người dùng |
| Notification |
_id, id_uer (ref User) |
content, type, status, createdAt, updatedAt |
Thông báo trạng thái tương tác |
| User |
_id (ObjectId) |
role, gender, email, username, password, phone, first_name, last_name, address, birthday, socketIds (Array String) |
Quản lý thông tin tài khoản và kết nối socket |
| Conversation |
_id, members (Array ObjectId), pendings (Array) |
name, status, createdAt, updatedAt |
Nhóm trò chuyện và danh sách chờ duyệt |
| Message |
_id, id_conversation, id_uer |
content, createdAt, updatedAt |
Nội dung tin nhắn trong cuộc hội thoại |
Công nghệ và công cụ phát triển
Quá trình xây dựng phần mềm được chuẩn hóa bằng bộ công cụ:
- Môi trường soạn thảo mã nguồn: Visual Studio Code.
- Công cụ quản lý cơ sở dữ liệu: Robo3T.
- Hệ thống quản lý phiên bản mã nguồn: Bitbucket.
- Công cụ mô hình hóa phần mềm: StarUML và công cụ vẽ sơ đồ trực tuyến app.net.
- Phiên bản công nghệ backend: Node.js phiên bản v10.3, Express phiên bản 4.3, thư viện
socket.io. Các lệnh khởi tạo dự án:
npm init
npm install --save express
npm install socket.io --save
npm install
npm start
- Phiên bản công nghệ frontend: React.js phiên bản 16.1, giao diện Semantic UI React, thư viện
react-redux, redux-devtools, socket.io-client. Các lệnh cài đặt:
npm init
npm install react react-dom semantic-ui-react --save
npm install react-redux --save
npm install --save-dev redux-devtools
npm install socket.io-client
Nội dung chính theo từng chương
Chương 1: Cơ sở lý thuyết
Chương 1 hệ thống hóa toàn bộ các nền tảng lý thuyết và công nghệ liên quan đến kiến trúc ứng dụng web hướng thời gian thực. Tác giả trình bày bản chất hoạt động của Node.js dựa trên cơ chế đơn luồng xử lý I/O không chặn (non-blocking), chỉ ra phạm vi ứng dụng thích hợp (như máy chủ WebSocket, máy chủ quảng cáo, dịch vụ đám mây, kiến trúc microservices) và dẫn chứng số liệu thực tế về hiệu quả thu gọn hạ tầng máy chủ của các doanh nghiệp lớn. Đối với tầng giao diện, chương này phân tích cơ chế Virtual DOM của React.js, cách nhúng mã HTML trong JavaScript qua JSX, vòng đời và mối liên hệ giữa Props (bất biến) và State (biến đổi). Tiếp đó, cấu trúc dữ liệu luồng một chiều của Redux cùng các thành phần Action, Reducer, Store được trình bày cụ thể. Phần cuối chương dành cho việc phân tích quy chuẩn RESTful API, danh mục các mã trạng thái HTTP (Status Codes 200, 201, 204, 400, 401, 403, 404,...), cơ chế hướng tài liệu của MongoDB, nguyên lý bắt tay và tối ưu băng thông header của WebSocket, cùng giải pháp hiển thị bản đồ số bằng Mapbox GL.
Chương 2: Phân tích & thiết kế hệ thống
Chương 2 tập trung vào việc mô hình hóa hệ thống We-travel nhằm đáp ứng các yêu cầu nghiệp vụ du lịch. Tác giả phân chia hệ thống thành hai nhóm tác nhân chính: Người quản trị (Admin) và Người dùng cuối (End-user). Hệ thống use case cho từng tác nhân được chi tiết hóa:
- Người quản trị: Quản lý tài khoản người dùng, quản lý danh mục địa điểm, quản lý và duyệt địa điểm du lịch, quản lý các nhóm trò chuyện.
- Người dùng cuối: Đăng ký, đăng nhập, tìm kiếm và xem địa điểm theo danh mục trên bản đồ, xem chi tiết địa điểm, đăng bài viết gắn thẻ địa điểm, bình luận, nhấn thích, theo dõi dòng thời gian của thành viên khác, đề xuất địa điểm mới và tham gia nhóm chat.
Tác giả lập 7 bảng đặc tả ca sử dụng chi tiết (Đăng ký, Đăng nhập, Xem chi tiết địa điểm, Đăng bài viết, Xem dòng thời gian của người khác, Đề xuất địa điểm mới, Tham gia nhóm chat), đồng thời thiết kế 7 sơ đồ tuần tự (Sequence Diagram) tương ứng để mô tả sự tương tác giữa tác nhân, giao diện, bộ điều khiển và cơ sở dữ liệu. Phần cuối chương trình bày chi tiết lược đồ dữ liệu gồm 11 bộ sưu tập của MongoDB kèm theo kiểu dữ liệu và mô tả chức năng của từng thuộc tính.
Chương 3: Triển khai và đánh giá kết quả
Chương 3 mô tả quy trình hiện thực hóa thiết kế hệ thống thành sản phẩm phần mềm chạy trên nền web. Nội dung bao gồm việc thiết lập môi trường phát triển, cài đặt các gói phụ thuộc cho cả máy chủ Node.js và máy khách React.js, cùng quy trình quản lý trạng thái client thông qua Redux DevTools. Tác giả trình bày sơ đồ hoạt động tích hợp giữa REST API và Socket.IO trong việc chứng thực token JWT và quản lý mã socket của người dùng. Chương này đánh giá kết quả thông qua hệ thống ảnh chụp giao diện hoàn thiện của 22 màn hình chức năng, bao gồm các màn hình phía người dùng (Đăng nhập, Đăng ký, Trang chủ bản đồ, Bảng tin Newsfeed có bình luận và gắn thẻ địa điểm, Form tạo bài viết, Trang chi tiết địa điểm tích hợp ảnh không gian 360 độ, Danh mục địa điểm, Đề xuất địa điểm, Phòng chat nhóm, Trung tâm thông báo, Trang dòng thời gian cá nhân) và các màn hình quản trị hệ thống (Quản trị người dùng, Thêm danh mục, Quản lý nhóm chat, Thêm và duyệt danh sách địa điểm du lịch).
Kết quả và đóng góp
- Kết quả đạt được:
- Xây dựng hoàn chỉnh mạng xã hội We-travel trên nền tảng web với đầy đủ các phân hệ chức năng cho người dùng cuối và quản trị viên theo đúng đặc tả thiết kế.
- Tích hợp thành công thư viện bản đồ tương tác Mapbox GL, cho phép du khách định vị và tra cứu thông tin địa điểm theo danh mục một cách trực quan trên tọa độ kinh độ (
longitude) và vĩ độ (latitude).
- Hiện thực hóa tính năng hiển thị hình ảnh toàn cảnh 360 độ tại trang chi tiết địa điểm thông qua thư viện Pannellum, nâng cao trải nghiệm tham quan trực quan cho du khách.
- Triển khai thành công tính năng trao đổi thông tin tức thời (chat nhóm, thông báo, bình luận) nhờ ứng dụng công nghệ kết nối hai chiều WebSocket qua thư viện Socket.IO.
- Giải pháp đề xuất của tác giả: Đề xuất mô hình mạng xã hội đóng góp từ cộng đồng (crowdsourcing) cho ngành du lịch; người dùng không chỉ đóng vai trò tiếp nhận thông tin mà còn trực tiếp đề xuất địa điểm mới, chia sẻ bài viết thực tế và đánh giá (vote điểm từ 1 đến 5 sao) để xây dựng hệ thống dữ liệu du lịch khách quan, độc lập với các dịch vụ lữ hành thương mại.
- Đóng góp của đồ án: Đưa ra giải pháp công nghệ cụ thể kết hợp giữa bản đồ số, mạng xã hội và truyền thông thời gian thực nhằm tháo gỡ khó khăn trong việc tiếp cận thông tin du lịch tin cậy của du khách tự túc và khách phượt, thay vì chỉ cung cấp dịch vụ bán tour định sẵn như các trang web du lịch truyền thống.
Hạn chế và hướng nghiên cứu tiếp
- Hạn chế của đề tài:
- Tác giả tự nhận định trong lời nói đầu: do hạn chế về kiến thức và kỹ năng quản lý thời gian, quá trình thực hiện đồ án vẫn còn những thiếu sót nhất định.
- Hệ thống mới dừng lại ở việc phát triển và vận hành trên môi trường trình duyệt web máy tính, chưa xây dựng ứng dụng di động riêng biệt.
- Thư viện bản đồ Mapbox GL còn tồn tại một số hạn chế nhất định về mặt dịch vụ và dữ liệu chi tiết khi so sánh với Google Maps.
- Công nghệ WebSocket là đặc tả mới của HTML5 nên còn gặp rào cản về khả năng hỗ trợ trên các dòng trình duyệt cũ, đồng thời không áp dụng được các cơ chế quản lý vòng đời yêu cầu (như cơ chế lọc session trong các framework truyền thống).
- Dữ liệu hệ thống ban đầu chưa có sẵn, phụ thuộc hoàn toàn vào mức độ tham gia đóng góp nội dung của cộng đồng người dùng sau khi triển khai.
- Hướng nghiên cứu và phát triển tiếp: Tiếp tục hoàn thiện các chức năng chưa tối ưu, khắc phục các thiếu sót trong quản lý hệ thống, nâng cao trải nghiệm người dùng (UX/UI), mở rộng khả năng tương thích trên nhiều thiết bị và phát triển phiên bản ứng dụng trên nền tảng di động.
Giá trị tham khảo
Đồ án tốt nghiệp là tài liệu tham khảo có giá trị chuyên môn đối với sinh viên chuyên ngành Công nghệ thông tin và Kỹ thuật phần mềm đang thực hiện các đề tài xây dựng ứng dụng web hiện đại. Cụ thể:
- Thiết kế kiến trúc hệ thống full-stack: Cung cấp mô hình tham khảo chuẩn xác về việc kết hợp giữa backend Node.js/Express và frontend React.js/Redux theo mô hình Single Page Application.
- Tích hợp WebSocket thời gian thực: Phần trình bày về cơ chế bắt tay, tính toán lưu lượng gói tin và giải pháp tích hợp Socket.IO kết hợp xác thực JWT là tài liệu kỹ thuật hữu ích cho các dự án xây dựng phòng chat nhóm và hệ thống thông báo tức thời.
- Tích hợp bản đồ số và hình ảnh 360 độ: Mã nguồn và quy trình tích hợp thư viện Mapbox GL cùng Pannellum trong đồ án là giải pháp tham khảo trực tiếp cho các đề tài thuộc lĩnh vực du lịch số, quản lý địa điểm hoặc hệ thống thông tin địa lý (GIS) trên nền web.
- Mô hình hóa dữ liệu NoSQL: Cung cấp cấu trúc thiết kế 11 collection hoàn chỉnh trong MongoDB phục vụ bài toán mạng xã hội, giải quyết mối quan hệ giữa người dùng, bài viết, bình luận, tương tác theo dõi và phân quyền quản trị.
Câu hỏi thường gặp
1. Hệ thống We-travel xử lý cơ chế xác thực người dùng giữa phía Client và phía Server như thế nào?
Hệ thống sử dụng cơ chế xác thực dựa trên chuỗi mã Access Token (JWT - JSON Web Token), hoàn toàn không lưu trữ phiên làm việc qua session hay cookie. Khi người dùng đăng nhập thành công, máy chủ xác thực tài khoản và trả về một chuỗi token. Phía client sẽ lưu mã này và đính kèm vào tất cả các yêu cầu RESTful API tiếp theo. Đồng thời, khi khởi tạo kết nối SocketClient với SocketServer, chuỗi token cũng được gửi kèm để máy chủ nhận diện người dùng và lưu trữ mã kết nối socketId tương ứng vào bảng User.
2. Cơ sở dữ liệu của đồ án được tổ chức như thế nào trong MongoDB?
Cơ sở dữ liệu được tổ chức thành 11 bộ sưu tập (collection) hướng tài liệu, bao gồm: Category (danh mục địa điểm), Place (thông tin và tọa độ địa điểm), Vote (đánh giá xếp hạng từ 1 đến 5 sao), Like (lượt thích bài viết), Post (nội dung và hình ảnh bài đăng), Comment (bình luận), Follow (quan hệ theo dõi giữa các người dùng), Notification (thông báo), User (thông tin người dùng và phân quyền), Conversation (nhóm trò chuyện), và Message (nội dung tin nhắn trong nhóm chat).
3. Tại sao tác giả sử dụng công nghệ WebSocket thay cho phương thức HTTP truyền thống đối với chức năng trò chuyện trực tuyến?
Lý do chính xuất phát từ hiệu năng truyền tải dữ liệu và dung lượng header. Tác giả chứng minh rằng một header yêu cầu/phản hồi của HTTP chiếm khoảng 871 byte, trong khi WebSocket chỉ tiêu tốn 2 byte sau khi đã thiết lập kết nối TCP. Trong kịch bản có 10.000 người dùng trực tuyến cùng gửi/nhận dữ liệu mỗi giây, giao thức HTTP tiêu tốn tới 8.710.000 byte/giây (khoảng 66 Mbps) chỉ riêng cho phần header, trong khi WebSocket chỉ tiêu tốn 20.000 byte/giây (khoảng 0.153 Kbps), giúp giảm tải băng thông máy chủ và đảm bảo độ trễ thấp cho tính năng chat thời gian thực.
4. Hai nhóm tác nhân trong hệ thống We-travel có những quyền hạn và chức năng cụ thể nào?
Hệ thống phân định rõ hai tác nhân:
- Người dùng cuối (End-user): Có thể đăng ký tài khoản, đăng nhập, tra cứu địa điểm du lịch trên bản đồ theo danh mục, xem chi tiết địa điểm kèm ảnh 360 độ, đăng bài viết chia sẻ kèm gắn thẻ địa điểm, bình luận, bấm thích, đánh giá điểm vote, xem dòng thời gian và theo dõi người dùng khác, đề xuất địa điểm mới lên hệ thống, và tham gia vào các phòng chat nhóm trực tuyến.
- Người quản trị (Admin): Thực hiện các chức năng quản lý hệ thống bao gồm quản lý tài khoản người dùng, quản trị danh mục địa điểm, kiểm duyệt và quản lý các địa điểm du lịch, phê duyệt hoặc từ chối thành viên và quản lý các nhóm chat.
5. Giải pháp hiển thị bản đồ số và hình ảnh đa chiều trong hệ thống được hiện thực hóa bằng những công nghệ nào?
Chức năng bản đồ số được phát triển dựa trên thư viện nguồn mở Mapbox GL, cho phép hiển thị các mảnh bản đồ vector động kết xuất qua OpenGL sử dụng dữ liệu nền Mapbox Streets từ OpenStreetMap. Đối với trải nghiệm tham quan không gian thực tế tại trang chi tiết địa điểm, tác giả tích hợp thư viện Pannellum để kết xuất và tương tác với các hình ảnh toàn cảnh 360 độ.
Kết luận
Đồ án tốt nghiệp "Xây dựng mạng xã hội We-travel hỗ trợ người du lịch" của sinh viên Triệu Tấn Danh đã nghiên cứu và giải quyết bài toán cung cấp thông tin du lịch tương tác độc lập dành cho du khách tự túc. Tác giả đã hoàn thiện việc phân tích, thiết kế và hiện thực hóa một hệ thống web full-stack kết hợp giữa Node.js, React.js, Redux, cơ sở dữ liệu MongoDB và công nghệ truyền thông thời gian thực WebSocket. Sản phẩm đáp ứng đầy đủ các chức năng nghiệp vụ của một mạng xã hội chuyên ngành du lịch, tích hợp bản đồ tương tác Mapbox GL và hình ảnh 360 độ Pannellum. Toàn bộ tài liệu đồ án cung cấp cấu trúc thiết kế ca sử dụng, sơ đồ tuần tự và lược đồ dữ liệu chi tiết, đóng vai trò là nguồn tài liệu tham khảo kỹ thuật hữu ích cho sinh viên ngành Công nghệ phần mềm.