Xây dựng website cung cấp dịch vụ du lịch bằng công nghệ NextJS

NextJS [1]

- Website được xây dựng dựa trên NextJS thì phải sử dụng bộ định tuyến trên tệp của source code, chúng ta không thể sửa đổi cách giao với các tuyến. - Nhờ kết hợp giữa Typescript và NextJS nên việc định nghĩa các interface mà đối tượng cần để thực thi do đó tính ràng buộc cao, giúp kiểm soát và dễ dàng phát hiện lỗi. - Một đặc điểm nổi bật của NextJS so với ReactJS đó là định tuyến url cho website một các dễ dàng tự động xử lý tất cả các file với các đuôi .js, .jsx, ts hoặc .tsx trong cây thư mục như một route vì thế giúp định tuyến route một cách nhanh chóng.

NodeJS [2]

- Gây tốn hao tài nguyên CPU như encoding, convert file, decoding encryption (do NodeJS được viết bằng ngôn ngữ C++ và Javascript ). - Sử dụng một framework của NodeJS là ExpressJS để tạo ra API để client tương tác với server. - Sử dụng một ORM (Object Relational Mapping) dành cho NodeJS là Sequelize để thực hiện ánh xạ CSDL MySql sang các đối tượng, thuận tiện cho việc ràng buộc và truy vấn dữ liệu.

Khảo sát hiện trạng

Khi người dùng nhấn xem chi tiết vào một tour hoặc khánh sạn bất kỳ thể hiện đầy đủ các thông tin như hình ảnh, mô tả, địa điểm trên bản đồ, đánh giá, giá tiền, khung giờ hoạt động tour, các điều khoản dịch vụ,…. Khi người dùng tìm kiếm tour hoặc phòng (khách sạn) phù hợp đến phần thanh toán, các thông tin của người dùng đã được lưu sẽ được hiển thị (nếu đã đăng nhập), có phần tóm tắt tour đã chọn, tổng tiền cần thanh toán,…. Khi nhấn vào xem chi tiết trang cũng thể hiện đầy đủ các thông tin như tên tour (khách sạn), hình ảnh, đánh giá, mô tả,… Một điểm rất hay ở trang Booking là tích hợp sẵn chọn số lượng vé trong chi tiết sản phẩm để tăng trải nghiệm người dùng (khác với trang Traveloka).

Xác định yêu cầu 1. Yêu cầu chức năng

4 Xóa nhân viên Loại bỏ những người dùng không còn là nhân viên tại trang quản lý nhân viên 3.2.1.5. Tính tiện dụng 2 Dễ dàng mở rộng, nâng cấp và bảo trì Tính tiến hóa 3 Đảm bảo hệ thống chạy ổn định, hạn chế xảy ra lỗi Tính hiệu quả 4 Hoạt động được trên nhiều trình duyệt web khác Tính tương thích. Quản lý dịch vụ 15% Bị thiếu sót và sai logic Gần như phải xây dựng rất nhiều dẫn đến giao mới hoàn toàn về giao diện cũng sai, chỉ tận diện và API.

Mô tả lược đồ

• Use case authorization 1. Sign up
• Use case “manage” của admin 1. Manage account
• Use case “manage” của Enterprise 1. Manage turnover
• Use case “manage” của Staff 1. Manege tour
• Use case book service 1. Usecase book tour
• Use case “manage” của Customer 1. Manage information

(A1) Khi người dùng thoát khỏi trang đăng ký Alternate Flow(s) thì quá trình tạo tài khoản không được diễn ra. Short Description Người dùng cần đăng nhập tài khoản để sử dụng những tác vụ cần được đăng nhập Actor Super admin, Admin, Enterprise, Staff,. (1) Nhấn nút đăng nhập hoặc khi thực hiện một tác vụ nào đó cần được đăng nhập thì sẽ chuyển Main Flow người dùng đến trang đăng nhập.

(2) Điền các thông tin vào form (E1) (A1) (3) Nhấn nút đăng nhập để hệ thống xác nhận (A1) Khi thoát khỏi trang đăng nhập hoặc thực Alternate Flow(s) hiện đăng ký thì quá trình đăng nhập không. Exception Flow(s) (E1) Nếu tên tài khoản không tồn tại hoặc nhập tài khoản không đúng thì thông báo cho người dùng sai thông tin. (2.2.2) Nhấn vào nút “Xem chi tiết” của một nơi ở bất kỳ thì doanh thu theo phòng sẽ được thống kê (2.2.3) Nhấn vào nút “Xem chi tiết” của một phòng bất kỳ thì doanh thu của phòng đó được thống kê Alternate Flow(s).

Tìm kiếm: Nhập tên nhân viên vào ô tìm kiếm → danh sách nhân viên có tên tương ứng được hiển thị (A1) Muốn hủy tác vụ đang thực hiện thì chỉ cần Alternate Flow(s) thoát khỏi hộp thoại được hiện lên hoặc nhấn nút. Alternate Flow(s) (A1) Muốn hủy tác vụ đang thực hiện thì chỉ cần thoát khỏi hộp thoại được hiện lên hoặc nhấn nút. (A1) Muốn hủy tác vụ đang thực hiện thì chỉ cần thoát khỏi hộp thoại được hiện lên hoặc nhấn nút Alternate Flow(s) “Hủy”.

Thực hiện được các tác vụ xem, trả lời các đánh giá Post-Conditions của khách hàng và xóa những thảo luận không đúng. Post-Conditions Đánh giá dịch vụ thành công theo ý của người dùng (1) Tại trang chi tiết dịch vụ (du lịch, nơi ở) nhấn vào nút “Thêm đánh giá” hoặc tại trang “Danh sách giao dịch” chọn “Đánh giá” vào dịch vụ muốn đánh giá. Người dùng thực hiện được các tác vụ xem, thêm Post-Conditions thông tin, đổi lịch, hủy, tải xuống thông tin hóa đơn.

Lược đồ lớp (class diagram) 1. Lược đồ

-1 Stay có nhiều bình luận Event - Chứa các thuộc tính như thông - Nhiều Event được quản. Voucher - Chứa các thuộc tính như thông - Nhiều Voucher được tin của Voucher quản lý bởi 1 Admin - Có các phương thức: create(), - Nhiều Voucher được áp update(), delete() dụng cho nhiều Tour và. Commission - Chứa các thuộc tính như thông - Nhiều Commission được tin của Voucher quản lý bởi 1 Admin - Có các phương thức: create(), - Nhiều Commission được update(), delete() áp dụng cho Enterprise Policy - Chứa các thuộc tính như thông - Nhiều Policy được quản.

Thiết kế giao diện 1. Trang chủ

• Phần đánh giá của khách hàng (có ở trang chi tiết tour và nơi ở) 1. Các đánh giá
• Trang chi tiết nơi ở 1. Phần thông tin
• Trang hồ sơ của tôi
• Trang quản lý của Enterprise và Staff 1. Danh mục quản lý

1 Danh sách các địa Div Khi nhấn vào từng mục sẽ được chuyển điểm nổi bật đến trang danh sách điểm du lịch theo địa. 1 Danh sách các địa Div Khi nhấn vào từng mục sẽ được chuyển điểm có nơi ở nổi bật đến trang danh sách điểm nơi ở theo địa. 1 Xem tất cả hình ảnh Div Khi nhấn vào sẽ xem tất cả các ảnh 2 Chọn phòng Button Khi nhấn vào sẽ chuyển đến mục chọn.

5 Đặt lại bộ Button Khi nhấn vào sẽ đặt lại bộ lọc bao gồm ô lọc tìm kiếm, ngày đi, danh mục chọn bộ lọc 6 Xem chi tiết Button Khi nhấn vào sẽ hiển thị chi tiết phòng. 1 Mật khẩu hiện tại Input Nhập mật khẩu hiện tại 2 Mật khẩu mới Input Nhập mật khẩu mới 3 Xác nhận mật khẩu Input Nhập xác nhận mật khẩu. 1 Mục thông tin Input Mục điền thông tin 2 Mục Lịch trình Input Mục điền lịch trình 3 Mục giá và ngày Button Mục điền giá và ngày 4 Mục chính sách Button Mục điền chính sách.

1 Quản lý dịch vụ người dùng Tab Quản lý dịch vụ du lịch 2 Quản lý dịch vụ sự kiện Tab Quản lý dịch vụ nơi ở 3 Quản lý hoa hồng Tab Quản lý nhân viên. 3 Đăng nhập Button Nhấn nút “Đăng nhập” để vào hệ thống 4 Quên mật Link Nếu quên mật khẩu để chuyển sang trang lấy. 11 Tạo tài Button Nhấn để tạo tài khoản (sau khi tạo tài khoản sẽ khoản được yêu cầu kiểm tra email để xác nhận) 4.4.16.

1 Email Input Nhập email người dùng đã đăng ký hệ thống 2 Gửi Button Nhấn “Gửi” để được gửi mã lấy mật khẩu (sau. khi nhấn sẽ được thông báo kiểm tra email để nhập mã xác nhận lấy lại mật khẩu).

Thiết kế database 1. Lược đồ quan hệ

• Mô tả

14 termsAndCondition String Điều khoản điều kiện của tour 15 numberOfReviewer Integer Số lượng người đánh giá. 18 minPrice Double Giá thấp nhất của tour trong những ngày diễn ra tour 19 maxPrice Double Giá cao nhất của tour trong. 15 termsAndCondition String Điều khoản điều kiện của nơi ở 16 minPrice Double Giá thấp nhất của nơi ở trong.

Cài đặt ứng dụng

• Các bước cài đặt 1. Cài đặt back-end

Bước 3: Sau khi mở được project “travel-service-be" bằng Visual Studio Code, chọn “Terminal” trên thanh taskbar, chọn tiếp “New Terminal” nhập. “npm install” để cài đặt thư viện sau đó nhập “npm run server” để chạy. Chọn File =>chọn Open Folder =>chọn thư mục “travel-service" để mở FrontEnd.

Bước 3: Sau khi mở được project “travel-service" bằng Visual Studio Code, chọn “Terminal” trên thanh taskbar, chọn tiếp “New Terminal” nhập “npm install” để cài đặt thư viện sau đó nhập “npm run dev” để chạy Frontend. Sau khi chạy thành công, khởi động trình duyệt web và truy cập vào http://localhost:3000/ để sử dụng hệ thống. Lưu ý: Có thể truy cập vào https://travel-service.vercel.app/ để sử dụng hệ thống mà không cần cài đặt hay khởi động trên máy local.

Thử nghiệm hệ thống

Điền thông tin đăng Thông báo nhập Pass 002 với email (email, password) sai mật khẩu hoặc. Nhập địa chỉ hoặc từ và cho ra kết quả khóa hoạt động du lịch theo thông tin tìm. Nhập địa chỉ hoặc từ và cho ra kết quả nếu không có khóa hoạt động du lịch “KHÔNG TÌM thông tin thích 3.

Không điền thông tin Thông báo điền Pass 002 dịch vụ du người thanh toán thông tin người. Tại trang “Đơn hàng Đổi lịch theo ngày Pass 005 còn thời gian và giao dịch” chọn hóa muốn đồi. Tại trang “Đơn hàng Không hiển thị nút Pass 006 không còn và giao dịch” chọn hóa đổi lịch.

Tại mục danh sách Tạo mới thành Pass 001 dịch vụ du dịch vụ du lịch nhấn công dịch vụ du. Tại mục danh sách Thông báo nhập Pass 002 dịch vụ du dịch vụ du lịch nhấn thiếu thông tin.