Chương 1 Tổng quan 1.1 Lý do chọn đề tài Trước đây việc kinh doanh bán tour du lịch chỉ đơn thuần là các công việc như quản lý tour, đặt tour, thống kê doanh thu thông qua giấy tờ và bảng tính excel… Tuy nhiên, đến khi nhu cầu đi du lịch theo tour của khách hàng ngày càng tăng thì việc quản lý bằng giấy tờ không còn hiệu quả, việc quản lý đặt tour, doanh thu sẽ mất nhiều thời gian và thiếu sót. Vì thế, hệ thống kinh doanh quản lý bán tour trực tuyến đã được ra đời. Hệ thống bán tour trực tuyến là một phân hệ giúp cho khách hàng có thể đặt tour giữ chỗ và thanh toán trực tuyến. Nhờ đó, tiết kiệm rất nhiều thời gian và công sức cho khách hàng mỗi khi có nhu cầu đi du lịch.
Website du lịch trực tuyến là một thể hiện của hệ thống bán tour trực tuyến. Sự ra đời của hệ thống bán tour trực tuyến đã giúp giảm thiểu hạn chế về không gian và thời gian rất nhiều giữa việc liên kết bán tour, tăng khả năng quản trị một cách hiệu quả, giảm thiểu thời gian cho nhân viên cũng như ban quản trị, tăng thêm doanh thu bán hàng, góp phần tạo cầu nối gắn kết khách hàng với công ty du lịch, thông qua các kênh thông tin đa chiều với nhiều tiện ích, khách hàng có thể tra cứu các thông tin du lịch trong và ngoài nước trên website mọi lúc mọi nơi.2 Mục đích của đề tài Tìm hiểu ExpressJS, Ant Design, Bootstrap Framework và thư viện ReactJS về cách thức hoạt động, cấu hình và tích hợp vào dự án. Từ đó xây dựng một server có độ bảo mật và tốc độ với ExpressJS, một giao diện thân thiện có mức độ trải nghiệm người dùng cao với Ant Design và một Single page load (SPA) với ReactJS. Nhóm chọn đề tài “Xây dựng website đặt tour du lịch” với những mục đích sau: − Xây dựng một website kinh doanh tour du lịch cho một chủ thể (cá nhân hoặc một doanh nghiệp) để quảng bá tour của họ lên mạng và tiếp cận nhiều người dùng hơn, là kênh trao đổi thông tin giữa người bán và người mua tour.
1 − Tìm hiểu ExpressJS để xây dựng web application. − Tìm hiểu thư viện ReactJS để xây dựng giao diện người dùng. − Tìm hiểu và sử dụng Ant Design. − Nâng cao kỹ năng giải quyết vấn đề, tìm kiếm thông tin, áp dụng các công nghệ mới trong xây dựng và phát triển các tính năng phổ biến về lĩnh vực tour du lịch.3 Quy trình nghiệp vụ và phương pháp tiếp cận 1.1 Quy trình nghiệp vụ Công ty du lịch thiết kế tour và lên lịch trình cho từng tour cụ thể.
Sau đó, bộ phận văn phòng có nhiệm vụ cập nhật thông tin các tour này lên website với đầy đủ thông tin về giá cả, loại tour, lịch trình, các địa phương đi đến và hình ảnh minh họa nếu có. Khách hàng vào viếng thăm website sẽ xem thông tin chi tiết của từng tour hiện có hoặc tìm kiếm tour theo các yêu cầu cụ thể về giá cả, địa phương muốn đến, ngày khởi hành của tour. Sau đó, khách hàng có thể tiến hành đặt chỗ cho tour đang xem nếu muốn. Các đơn đặt chỗ này sẽ được cập nhật vào database và hiển thị cho người quản trị được phân quyền xem, hiệu chỉnh, xóa hoặc xác nhận sau khi đã kiểm tra tính chính xác của thông tin đặt chỗ.
Khách hàng cũng có thể thông qua trang web để gửi các thông tin yêu cầu khác về công ty bằng trang Liên hệ. Thông tin này cũng sẽ được truyền xuống database và cho phép người quản trị quản lý chúng.2 Phương pháp tiếp cận − Cách tiếp cận: Nghiên cứu các trang web đặt tour đã có trên internet. − Sử dụng phương pháp nghiên cứu: o Phương pháp đọc tài liệu. o Phương pháp phân tích mẫu.
o Phương pháp thực nghiệm làm những module nhỏ.4 Khảo sát hiện trạng 1.vn là một trong những ứng dụng đặt phòng trực tuyến hàng đầu Việt Nam.vn, người dùng sẽ tìm kiếm phòng dễ dàng với giá "hạt rẻ", thông tin khách sạn được mô tả rõ ràng, cùng với rất nhiều chương trình khuyến mại.1 Một số hình ảnh Hình 1.1 Trang chủ website mytour.2 Trang chủ website mytour.3 Trang chủ website mytour.1 Giao diện − Tông màu: Chủ đạo là màu trắng, xanh dương và điểm nhấn là màu hồng cùng font chữ kích cỡ vừa phải. − Chi tiết sản phẩm: Có tiêu đề mô tả ngắn gọn nội dung tour, có đánh giá sao của những người đã đặt tour, có thời lượng, loại tour, quy mô nhóm, địa điểm, có hình ảnh kèm theo, giá cả, ngày khởi hành, số lượng người tham gia (người lớn, trẻ em), lịch trình chi tiết và các chính sách.4 Trang chi tiết tour của website mytour.5 Trang chi tiết tour của website mytour.vn (2) − Bố cục sắp xếp: Hài hòa, rõ ràng, cách sắp xếp quen thuộc cùng với thông tin cần thiết và chất lượng hình ảnh cao. Trải nghiệm người dùng tốt. − Hiệu ứng: Các hiệu ứng không nhiều, đơn giản (chủ yếu là chuyển tiếp và di chuyển ngang, đưa chuột vào sẽ nổi bật lên).
− Dữ liệu sản phẩm: Đầy đủ các thông tin quan trọng và có các thông tin liên quan.2 Chức năng − Tìm kiếm: Có gợi ý tìm kiếm theo từ khóa thu hút.6 Chức năng tìm kiếm tour của website mytour.vn − Sắp xếp, bộ lọc: Theo khoảng giá, địa điểm, chủ đề. − Đặt tour: Đặt tour qua tổng đài, gửi đơn đặt tour, xem chương trình tour, lịch trình khởi hành, điều khoản chính sách, các dịch vụ đi kèm khác, đánh giá tour.7 Chức năng đặt tour của website mytour.vn − Đăng nhập: Đăng nhập bằng email đã đăng ký, lưu thông tin người dùng và gợi ý các chuyến đi liên quan.8 Chức năng đăng nhập của website mytour.vn − Thanh toán: Đặt tour qua tổng đài và gửi đơn đặt tour. − Các chức năng đặc biệt khác: Góp ý website, cẩm nang du lịch, chương trình khuyến mãi, thông báo đến người dùng, chia sẻ và like trên facebook. − Khi nhấn vào điểm đến phổ biến nước ngoài thì chuyển hướng sang trang web có tên miền khác.3 Nhược điểm − Không gợi ý search tour theo địa điểm, ngày đi… − Chưa có chức năng sắp xếp tour tăng, giảm dần theo giá… − Chưa có phương thức thanh toán thuận tiện.
− Chưa có tính năng đặc biệt khác như liên kết Messenger, Zalo… 1.net Saigontourist là một trong những doanh nghiệp hàng đầu trong lĩnh vực dịch vụ - du lịch, với những đóng góp tích cực trong sự nghiệp phát triển ngành du lịch cả nước. Các mô hình kinh doanh dịch vụ - du lịch cụ thể bao gồm lưu trú, nhà hàng, lữ hành, vui chơi giải trí, thương mại, xuất nhập khẩu, cửa hàng miễn thuế, vận chuyển, xây dựng, đào tạo nghiệp vụ du lịch & khách sạn, sản xuất & chế biến thực phẩm.1 Một số hình ảnh Hình 1.9 Trang chủ phần đầu của website saigontourist.10 Trang chủ phần các tour mùa hè của website saigontourist.11 Trang chủ các gói khuyến mãi của website saigontourist.1 Giao diện − Tông màu: Tương phản, dịu mắt. − Chi tiết sản phẩm: Mô tả chi tiết về chuyến đi, có hình ảnh tham khảo, lịch trình đầy đủ… Hình 1.12 Trang chi tiết tour của website saigontourist.net (1) − Bố cục sắp xếp: Sắp xếp các thông tin dễ nhìn và tìm kiếm, các mục hài hòa. − Hiệu ứng: Hiệu ứng đơn giản, chủ yếu là chuyển tiếp trang, hiệu ứng zoom ảnh và các slider show bắt mắt.
8 − Dữ liệu sản phẩm: Cung cấp được đầy đủ các thông tin cần thiết của một chuyến đi và những thông tin liên quan khác.13 Trang chi tiết tour của website saigontourist.2 Chức năng − Tìm kiếm: UX tốt – mờ nền, có chọn địa điểm đến, ngày đi, ngày về. Kết quả trả về khá tốt nhưng còn giới hạn số tour.14 Chức năng tìm kiếm của website saigontourist.net − Sắp xếp: Trang có 3 sự lựa chọn: ngày gần nhất, giá thấp nhất, hấp dẫn nhất. − Đặt tour: Trang có tất cả thông tin chi tiết như giá cả (người lớn, trẻ em, em bé), ngày khởi hành, mã tour, các thông tin hay về tour, chức năng in chương trình 9 tour, lịch trình rõ ràng, hình ảnh nhiều, chính sách tour, các câu hỏi thường gặp, dịch vụ đi kèm và các tour liên quan. − Đăng nhập giúp lưu thông tin chuyến đi và nâng cấp tài khoản, đồng thời giúp đặt tour nhanh hơn ở lần sau.
− Hỗ trợ khách hàng: hotline, trả lời thắc mắc qua email và chatbot (đa ngôn ngữ).3 Nhược điểm − Pop-up ở hình dưới luôn xuất hiện khi chuyển tới bất kỳ trang nào và khi người dùng xác nhận hoặc tắt mới biến mất.15 Pop-up hỏi người dùng ở khu vực nào của website saigontourist.net − Chưa có chức năng đánh giá chuyến đi, điều này sẽ không giúp cho người dùng có cái nhìn tổng quan hoặc kinh nghiệm đi tour của người dùng trước. 10 Chương 2 Công nghệ áp dụng 2.1 ExpressJS là gì? Hình 2.1 ExpressJS ExpressJS là một framework nhỏ nhưng linh hoạt được xây dựng trên nền tảng của NodeJS. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile. ExpressJS hỗ trợ các method HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.
ExpressJS có rất nhiều các package hỗ trợ nó, còn cung cấp thêm về các tính năng để lập trình tốt hơn, mà không làm giảm tốc độ của NodeJS. Và hơn hết, các framework nổi tiếng của NodeJS hiện nay đều sử dụng ExpressJS như một tính năng cốt lõi, chẳng hạn: SailsJS, MEAN.2 Một vài tính năng nổi bật Hình 2.2 Sơ đồ mô tả các lớp trung gian xử lý HTTP − Thiết lập router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL. − Cho phép trả về các trang HTML dựa vào các tham số với template engines. − Hiệu suất cao, super-high test coverage.
− Tạo ứng dụng nhanh chóng. − Thiết lập các lớp trung gian để tiếp nhận và trả về các HTTP request (như hình dưới).3 Các thành phần chính − Express (): một Express application, là hàm đầu tiên được gọi. − Application: một app object, có những phương thức để: Routing HTTP requests, Cấu hình middleware, Rendering HTML views, đăng ký một template engine. − Request: Đối tượng req đại diện cho HTTP request và có các thuộc tính cho request query string, parameters, body, HTTP headers… Đây là một phiên bản nâng cao Node’s request.
− Response: Đối tượng res đại diện cho HTTP response mà ứng dụng Express gửi khi nhận được HTTP request. − Router: Một đối tượng bộ định tuyến là một phiên bản riêng biệt của middleware và routes. Nó như là một ứng dụng nhỏ, chỉ có khả năng thực hiện các chức năng định tuyến và middleware. Mỗi ứng dụng Express đều có bộ định tuyến ứng dụng tích hợp.