(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng trang Web đặt Tour du lịch trực tuyến sử dụng công nghệ Mern Stack
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG TRANG WEB ĐẶT TOUR DU LỊCH TRỰC TUYẾN SỬ DỤNG CÔNG NGHỆ MERN STACK Giáo viên hướng dẫn: Ts Lê Văn Vinh Sinh viên thực hiện: Võ Huỳnh Yến Nhi 16110171 KHĨA: 2016 NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng 12 năm 2020 i TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG TRANG WEB ĐẶT TOUR DU LỊCH TRỰC TUYẾN SỬ DỤNG CÔNG NGHỆ MERN STACK Giáo viên hướng dẫn: Ts Lê Văn Vinh Sinh viên thực hiện: Võ Huỳnh Yến Nhi 16110171 KHĨA: 2016 NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng 12 năm 2020 i LỜI CẢM ƠN Trên thực tế khơng có thành công mà không gắn liền với hỗ trợ, giúp đỡ dù hay nhiều, dù trực tiếp hay gián tiếp người khác Trong suốt thời gian từ bắt đầu học tập giảng đường đại học đến nay, em nhận nhiều quan tâm, giúp đỡ quý Thầy, cô bạn bè Với lòng biết ơn sâu sắc nhất, em xin gửi đến quý Thầy Cô Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh với tri thức tâm huyết để truyền đạt vốn kiến thức quý báu cho em suốt thời gian học tập trường Em xin chân thành cảm ơn Thầy Lê Văn Vinh tận tâm giảng dạy hướng dẫn em qua buổi học lớp buổi thực hành Nếu khơng có lời hướng dẫn, dạy bảo thầy em nghĩ đồ án em khó hồn thiện Một lần nữa, em xin chân thành cảm ơn thầy Đồ án thực khoảng thời gian gần tháng Bước đầu vào thực tế, tìm hiểu lĩnh vực này, kiến thức em hạn chế nhiều bỡ ngỡ Do vậy, khơng tránh khỏi thiếu sót điều chắn, em mong nhận ý kiến đóng góp quý báu quý Thầy Cô bạn học lớp để kiến thức em lĩnh vực hồn thiện Sau cùng, em xin kính chúc quý Thầy Cô Khoa Công Nghệ Thông Tin tồn thể q Thầy Cơ Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Trân trọng kính chào! Sinh viên thực v MỤC LỤC Trang bìa phụ i NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP ii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN iii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iv LỜI CẢM ƠN .v Danh mục bảng Error! Bookmark not defined Danh mục hình Error! Bookmark not defined CHƯƠNG 1.TỔNG QUAN 1.1.Tính cấp thiết đề tài 1.2.Khảo sát trạng 1.2.1.Vietnam Tourist 1.2.2.Saigon Star Travel 1.2.3.Tour đảo Bình Hưng 1.3.Cơng nghệ lập trình 1.4.Phạm vi nghiên cứu CHƯƠNG 2.CƠ SỞ LÝ THUYẾT 2.1.Giới thiệu MERN Stack 2.1.1.Stack gì, đời? 2.1.2.MERN Stack 2.2.Các công nghệ hỗ trợ khác 14 2.2.1.Redux 14 2.2.2.Ant Design 15 CHƯƠNG 3.XÁC NHẬN, PHÂN TÍCH VÀ MƠ HÌNH HĨA U CẦU 17 3.1.Phân tích yêu cầu đề tài 17 3.1.1.Tên đề tài 17 3.1.2.Chức trang web 17 3.1.3.Yêu cầu đặt 17 3.2.Mô hình hóa u cầu 19 3.3.Đặc tả chi tiết usecase 20 3.3.1.Guest 20 3.3.2 User 23 vi 3.3.3.Admin 25 3.4.Các lược đồ 27 CHƯƠNG 4.THIẾT KẾ PHẦN MỀM 32 4.1.Thiết kế sở liệu 32 4.2.Thiết kế giao diện, mơ tả mục đích hình dành cho admin 35 4.2.1.Login 35 4.2.2.Navbar left menu 35 4.2.3.Quản lý user 36 4.2.4.Quản lý Tour gallery 41 4.2.5.Quản lý tours 43 4.2.6.Xem lịch sử đặt tour 51 4.2.7.Cấu hình 52 4.2.8.Cấu hình footer 56 4.2.9.Cấu hình dịng thời gian 57 4.3.Thiết kế giao diện, mô tả mục đích hình người dùng cuối 59 4.3.1.Header footer 59 4.3.2.Đăng nhập/đăng ký 60 4.3.3.Trang chủ/danh sách tours 65 4.3.4.Xem chi tiết tour 66 4.3.5.Đặt tour 71 4.3.6.Thư viện du lịch 73 4.3.7.Giới thiệu 76 4.3.8.Trang cá nhân (dành cho người dùng đăng ký tài khoản) 78 4.4.Thiết kế thư mục 83 CHƯƠNG 5.CÀI ĐẶT VÀ KIỂM THỬ 87 5.1.Môi trường cài đặt 87 5.2.Kiểm thử 87 CHƯƠNG 6.KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 90 6.1.Những điểm đạt 90 6.2.Những khó khăn cách khắc phục 90 6.3.Ưu điểm 90 6.4.Hướng phát triển 91 Tài liệu tham khảo 92 vii Danh mục bảng Bảng 3.1 Thống kê nghiệp vụ Guest 20 Bảng 3.2 Thống kê, mô tả quy định cho nghiệp vụ Guest 21 Bảng 3.3 Thống kê nghiệp vụ User 22 Bảng 3.4 Thống kê, mô tả quy đinh cho nghiệp vụ user 23 Bảng 3.5 Thống kê nghiệp vụ admin 25 Bảng 3.6 Thống kê, mô tả quy định cho nghiệp vụ admin 25 Bảng 4.1 Đặc tả giao diện đăng nhập admin 35 Bảng 4.2 Đặc tả giao diện navbar admin 35 Bảng 4.3 Đặc tả giao diện Left menu 36 Bảng 4.4 Đặc tả giao diện quản lý users 37 Bảng 4.5 Đặc tả giao diện xem/chỉnh sửa user 38 Bảng 4.6 Đặc tả giao diện xem lịch sử đặt tour user 40 Bảng 4.7 Đặc tả giao diện xác nhận xóa user 40 Bảng 4.8 Đặc tả giao diện quản lý tour gallery 41 Bảng 4.9 Đặc tả giao diện chỉnh/tạo sửa tour gallery 42 Bảng 4.10 Đặc tả giao diện quản lý tours 44 Bảng 4.11 Đặc tả giao diện chỉnh sửa chi tiết tour 48 Bảng 4.12 Đặc tả giao diện popup xác nhận xóa tour 51 Bảng 4.13 Đặc tả giao diện xem lịch sử đặt tour 52 Bảng 4.14 Đặc tả giao diện xem chi tiết người đặt tour 52 Bảng 4.15 Đặc tả giao diện cấu hình điều khoản đặt tour 53 Bảng 4.16 Đặc tả giao diện lựa chọn ngông ngữ hiển thị cho trang tour 54 Bảng 4.17 Đặc tả giao diện quản lý header 54 Bảng 4.18 Đặc tả giao diện cấu hình tạo/chỉnh sửa header 55 Bảng 4.19 Đặc tả giao diện cấu hình footer 57 Bảng 4.20 Đặc tả giao diện cấu hình dòng thời gian 58 Bảng 4.21 Đặc tả giao diện chỉnh sửa/tạo kiện 59 Bảng 4.22 Đặc tả giao diện header 60 Bảng 4.23 Đặc tả giao diện footer 60 Bảng 4.24 Đặc tả giao diện đăng nhập 61 Bảng 4.25 Đặc tả giao diện đăng ký 62 viii Bảng 4.26 Đặc tả giao diện thông báo kiểm tra email 63 Bảng 4.27 Đặc tả giao diện thông báo đăng ký tài khoản thành công 64 Bảng 4.28 Đặc tả giao diện xem danh sách tours 66 Bảng 4.29 Đặc tả giao diện giới thiệu chung 67 Bảng 4.30 Đặc tả giao diện xem lịch trình 69 Bảng 4.31 Đặc tả giao diện xem thông tin 71 Bảng 4.32 Đặc tả giao diện đặt tour 71 Bảng 4.33 Đặc tả giao diện trước toán Paypal 73 Bảng 4.34 Đặc tả giao diện thông báo tốn thành cơng 73 Bảng 4.35 Đặc tả giao diện danh sách thư viện du lịch 74 Bảng 4.36 Đặc tả giao diện xem chi tiết viết 75 Bảng 4.37 Đặc tả giao diện giới thiệu trang web 77 Bảng 4.38 Đặc tả giao diện liên hệ với 77 Bảng 4.39 Đặc tả giao diện trang cá nhân 78 Bảng 4.40 Đặc tả giao diện xem chi tiết tour đặt 79 Bảng 4.41 Đặc tả giao diện chỉnh sửa thông tin cá nhân 80 Bảng 4.42 Đặc tả giao diện cài đặt tài khoản 81 Bảng 4.43 Đặc tả giao diện thay đổi mật 82 Bảng 4.44 Đặc tả giao diện xóa tài khoản 83 Bảng 5.1 Bảng kiểm thử hệ thống Error! Bookmark not defined ix Danh mục hình KHĨA LUẬN TỐT NGHIỆP i NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP ii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN iii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iv LỜI CẢM ƠN v Trang bìa phụ i vi NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP ii vi PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN LỜI CẢM ƠN iii vi iv vi v vi Danh mục bảng Error! Bookmark not defined vi Danh mục hình Error! Bookmark not defined vi CHƯƠNG 1.TỔNG QUAN vi CHƯƠNG 2.CƠ SỞ LÝ THUYẾT vi CHƯƠNG 3.XÁC NHẬN, PHÂN TÍCH VÀ MƠ HÌNH HĨA U CẦU .17 vi CHƯƠNG 4.THIẾT KẾ PHẦN MỀM 32 vii CHƯƠNG 5.CÀI ĐẶT VÀ KIỂM THỬ 87 vii CHƯƠNG 6.KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Tài liệu tham khảo 90 vii 92 vii Danh mục bảng viii Bảng 5.1 Bảng kiểm thử hệ thống defined CHƯƠNG Error! Bookmark not ix TỔNG QUAN Hình 1.1 Giao diện trang chủ Vietnam Tourist Hình 1.2 Giao diện trang chủ Saigon Star Trevel Hình 1.3 Giao diện trang chủ Tour đảo Bình Hưng x CHƯƠNG CƠ SỞ LÝ THUYẾT Hình 2.1 Các phận cấu thành stack [1] Hình 2.2 MERN Stack [2] Hình 2.3 MongoDB [3] Hình 2.4 NodeJS [4] Hình 2.5 NodeJS Components [4] 10 Hình 2.6 ExpressJS [4] 11 Hình 2.7 ReactJS [5] 11 Hình 2.9 Nguyên lý hoạt động Redux[7] 14 Hình 2.10 Cấu trúc Redux [7] 15 Hình 2.11 Ant Design cho ReactJS [7] 16 CHƯƠNG XÁC NHẬN, PHÂN TÍCH VÀ MƠ HÌNH HĨA U CẦU 17 Hình 3.1 Usecase Diagram người dùng cuối 19 Hình 3.2 Usecase diagram người quản trị 20 Bảng 3.1 Thống kê nghiệp vụ Guest 20 Bảng 3.2 Thống kê, mô tả quy định cho nghiệp vụ Guest 21 Bảng 3.3 Thống kê nghiệp vụ User 22 Bảng 3.4 Thống kê, mô tả quy đinh cho nghiệp vụ user 23 Bảng 3.5 Thống kê nghiệp vụ admin 25 Bảng 3.6 Thống kê, mô tả quy định cho nghiệp vụ admin 25 CHƯƠNG THIẾT KẾ PHẦN MỀM 32 Hình 4.1 Cấu trúc liệu Default type 32 Hình 4.2 Cấu trúc liệu User 32 Hình 4.3 Cấu trúc liệu Tour 33 Hình 4.4 Cấu trúc liệu TourGallery 33 Hình 4.5 Cấu trúc liệu BookingHistory 33 xi Hình 4.6 Cấu trúc liệu Notification 33 Hình 4.7 Cấu trúc liệu ContactUS 34 Hình 4.8 Cấu trúc liệu Config 34 Hình 4.9 Cấu trúc liệu Crash 34 Hình 4.11 Giao diện đăng nhập admin 35 Bảng 4.1 Đặc tả giao diện đăng nhập admin 35 Hình 4.12 Giao diện navbar admin 35 Bảng 4.2 Đặc tả giao diện navbar admin 35 Hình 4.13 Left menu admin 36 Bảng 4.3 Đặc tả giao diện Left menu 36 Hình 4.14 Giao diện quản lý users 37 Bảng 4.4 Đặc tả giao diện quản lý users 37 Hình 4.15 Giao diện xem/chỉnh sửa thông tin user 38 Bảng 4.5 Đặc tả giao diện xem/chỉnh sửa user 38 Hình 4.16 Giao diện xem lịch sử đặt tour user 39 Bảng 4.6 Đặc tả giao diện xem lịch sử đặt tour user 40 Hình 4.17 Popup xác nhận xóa user 40 Bảng 4.7 Đặc tả giao diện xác nhận xóa user 40 Hình 4.18 Giao diện quản lý Tour gallery 41 Bảng 4.8 Đặc tả giao diện quản lý tour gallery 41 Hình 4.19 Giao diện giao diện chỉnh sửa tour gallery 42 Bảng 4.9 Đặc tả giao diện chỉnh/tạo sửa tour gallery 42 Hình 4.20 Giao diện quản lý tours 44 Bảng 4.10 Đặc tả giao diện quản lý tours 44 Hình 4.21 Giao diện chỉnh sửa/tạo chi tiết tour(1) 45 Bảng 4.11 Đặc tả giao diện chỉnh sửa chi tiết tour 48 Hình 4.25 Giao diện popup xác nhận xóa tour 51 Bảng 4.12 Đặc tả giao diện popup xác nhận xóa tour 51 xii - Giao diện tạo xem chi tiết tour đặt: v v Hình 4.54 Giao diện xem chi tiết tour đặt Bảng 4.40 Đặc tả giao diện xem chi tiết tour đặt STT Kiểu Mô tả/Ghi Text Thông tin tour đặt Button Đóng giao diện - Giao diện chỉnh sửa thông tin cá nhân: 79 v v v v v v v v v 10 v Hình 4.55 Giao diện chỉnh sửa thông tin cá nhân Bảng 4.41 Đặc tả giao diện chỉnh sửa thông tin cá nhân STT Kiểu Mô tả/Ghi Text Email người dùng Input Nhập tên người dùng Input Nhập họ tên lót Radio button Chọn giới tính Selection Chọn tên quốc gia Selection Chọn mã quốc gia Input Nhập ID/passport Input Nhập số điện thoại Input Nhập địa 10 Button Lưu thông tin 80 - Giao diện cài đặt tài khoản: v v Hình 4.56 Giao diện cài đặt tài khoản v Bảng 4.42 Đặc tả giao diện cài đặt tài khoản STT Kiểu Mô tả/Ghi Text Thông tin người dùng Button Đến giao diện đổi mật - Button Giao diện đổi mật khẩu: Đến giao diện xóa tài khoản 81 v v3 v v Hình 4.57 Giao diện đối mật Bảng 4.43 Đặc tả giao diện thay đổi mật STT Kiểu Mô tả/Ghi Input Nhập mật cũ Input Nhập mật Input Xác nhận mật Button Lưu mật Sau kiểm tra điểu kiện thỏa mãn điều kiện button đổi sang màu cam người dùng nhấn để lưu mật 82 - Giao diện xóa tài khoản: v v Hình 4.58 Giao diện xóa tài khoản Bảng 4.44 Đặc tả giao diện xóa tài khoản STT Kiểu Mơ tả/Ghi Text, image Lời cảnh báo xóa tài khoản Button Xác nhận xóa tài khoản 4.4 Thiết kế thư mục - Thiết kế thư mục frontend trang admin: • Common: thư mục chứa component có tính tái sử dụng, xuất nhiều hình • Controller: thư mục gọi tồn API backend • Scss: thư mục dùng để chỉnh làm đẹp cho giao diện hình admin • Views: Thư mục bao gồm thư mục chủ yếu hình chức admin Mỗi thư mục gồm file index.js 83 Hình 4.59 Thiết kế thư mục cho fronend trang admin - Thiết kế thư mục cho frontend trang đặt tour: • Pages: Thư mục tổng tồn mã nguồn cho hình trang đặt tour • Components: thư mục chứa component tái sử dụng nhiều lần • Container: thư mục chứa thành phần luôn xuất tất hình (header, footer) • Screen: thư mục chứa giao diện hình chức trang web, bao gồm nhiều thư mục Mỗi thư mục thường có file index.js, file style.scss thư mục chứa component 84 Hình 4.60 Thiết kế thư mục fronend cho trang đặt tour - Thiết kế thư mục cho backend: • Models: chứa file mapping với database • Controller: chứa service bao gồm APIs connect với database hệ thống frontend • Routes: chứa router API 85 Hình 4.61 Thiết kế thư mục cho backend (1) Hình 4.62 Thiết kế thư mục cho backend (2) 86 CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ 5.1 Môi trường cài đặt - Sử dụng công nghệ Nodejs 14.7.0 MongoDB phiên 4.4.2 Trình duyệt Chrome phiên 87.0.4280.88 (Official Build) (64-bit) 5.2 Kiểm thử Bảng 5.1 Bảng kiểm thử hệ thống STT Tên test case Quy trình Kết mong đợi Kết Kiểm thử chức đăng nhập Nhấn vào nút Login header Nhập username, password vào form đăng nhập Gõ phím Enter nhấn vào nút Đăng nhập Ứng dụng giữ trang tại, đồng thời nút Login header đổi thành nút My page Pass Nhấn vào nút Login header Nhấn vào biểu Kiểm thử tượng chức Google+ giao đăng nhập diện đăng nhập với Chuyển đến giao Google diện login Google Thực bước cần thiết Ứng dụng giữ trang tại, thay đổi nút Login header thành nút My page Pass Nhấn vào nút Login header Nhấn vào dòng chữ Sign up Nhập thơng tin cần thiết vào form đăng kí Nhấn vào nút Đăng kí Ứng dụng thơng báo kiểm tra email để xác nhận Sau xác thực từ email cách nhấp vào link email chuyển đến giao diện thông báo đăng ký thành công Pass Kiểm thử chức đăng kí 87 Kiểm thử chức cập nhật thông tin Nhấn vào nút My page Nhấn tiếp vào nút Info More Chỉnh sửa lại trường muốn thay đổi Nhấn nút Save Ứng dụng giữ trang tại, đồng thời thông báo cập nhập thông tin thành cơng Pass Kiểm thử chức tìm kiếm tour Nhập từ khóa vào tìm kiếm Nhấn vào nút tìm kiếm gõ Enter Hiển thị danh sách kết phủ hợp Pass Kiểm thử chức đổi mật Nhấn vào nút My page Nhấn vào nút Account More Nhấn vào Chang password Nhập thông tin mật cũ Nhấn nút change password Cập nhật lại mật người dùng Pass Kiểm thử chức tìm kiếm viết thư viện du lịch Nhập từ khóa vào tìm kiếm Nhấn nút tìm kiếm gõ Enter Hiển thị danh sách kết phù hợp Pass 88 Kiểm thử chức toán tour với Paypal Chọn tour xem chi tiết Nhấn vào nút Book Nhập đầy đủ thông tin form Booking Nhấn nút Book Nhấn nút Paypal Tiến hành tốn với Paypal Thơng báo đặt tour thành cơng đồng thời gửi email cho người dùng thông tin tour Kiểm thử chức xem chi tiết tour Nhấn vào tour trang danh sách tour Hiển thị thơng chi tiết tour 10 Kiểm thử chức xem chi tiết viết thư viện du lịch Nhấn vào viets danh sách thư viện du lịch Hiển thị chi tiết bào viết Pass 11 Kiểm thử chức đăng xem lịch sử đặt tour Nhấn vào nút My page Nhấn vào nút Booking History Hiển thị danh sách tour mà người dùng đặt Pass 12 Kiểm thử Nhấn vào My page chức Nhấn vào nút xem chi Booking history tiết tour Nhấn vào tour cụ đặt thể đặt Hiển thị pop up thông tin chi tiết tour Pass Pass Pass 89 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Những điểm đạt - - Hoàn thành tiến độ Xử lý củng thực đầy đủ ý tưởng, thuật toán ban đầu mà người thực đề Sau thời gian tìm hiểu nghiên cứu thực hiện, đề tài “XÂY DỰNG TRANG WEB ĐẶT TOUR ONLINE” hoàn thiện so với mục tiêu ban đầu Mục tiêu đạt được, không vậy, người thực cịn đưa vào sử dụng cơng nghệ kỹ thuật mà ban đầu chưa đặt Cụ thể điểm mà nhóm đạt sau: • Tìm hiểu cơng nghệ liên quan đến javacript – tổng hợp tạo nên cơng nghệ MERN Stack • Tìm hiểu cơng nghệ hỗ trợ khác như: o Redux để lưu state dễ dàng o Ant design, Font awesome, Sweet Alert hỗ trợ component có sẵn cho Frontend o DraftJS để tạo nên text editor (WYSIWYG editor) o Bảo mật tốt với Json Web Token o Cloudinary để lưu hình ảnh dung lượng lớn • Hiện thực usecase hệ thống 6.2 Những khó khăn cách khắc phục - - Người thực lần tìm hiểu công nghệ MERN STACK, thời gian làm quen với công nghệ chưa đủ lâu để nắm vững kiến thức chuyên môn công nghệ Tư thiết kế liệu giao diện cịn hạn chế Chưa có quán khâu xử lý code thuật toán, giao diện cho thực đồng Mặc dù cố gắng việc thực tồn số điểm chưa đạt thời gian có hạn Khâu thiết kế xử lý giao diện vụng Cách khắc phục: Tham khảo tài liệu sách củng internet, nhờ vào hướng dẫn, góp ý, đóng góp ý tưởng giảng viên hướng dẫn Lê Văn Vinh nên hoàn thành tốt tiến độ 6.3 Ưu điểm - Thông tin lưu trữ trực quan, quán Có độ bảo mật tốt json web token Giao diện đại, dễ nhìn, thân thiện với người dùng Ứng dụng đơn giản, dễ sử dụng Áp dụng công nghệ Hệ thống chạy code online, tốc độ phản hồi nhanh 90 - Khả bảo trì, mở rộng dễ dàng, nhanh chóng Giao diện responsive mượt mà cho nhiều kích thước hình 6.4 Hướng phát triển - Cải thiện, phát triển nhiều tính có Hỗ trợ kết nối API từ bên thứ ba Tối ưu hóa nghiệp vụ Thêm animation cho kiện Thêm nghiệp vụ thu phí theo tháng đưa vào quảng cáo Hỗ trợ nhiều ngôn ngữ Cung cấp nhiều tour du lịch Xây dựng tính có hỗ trợ trí tuệ nhân tạo để tối ưu hóa hệ thống Hỗ trợ đa dạng dịch vụ 91 Tài liệu tham khảo Tiếng Việt [1] Technical Stack gì? (2017, May 23) Retrieved https://toidicodedao.com/2017/05/23/giai-thich-technical-stack-la-gi/ from [2] Giới thiệu MERN Stack (n.d.) Retrieved from https://niviki.com/gioi-thieumern-stack/ [3] Tìm hiểu MongoDB (2017, May 24) Retrieved from https://viblo.asia/p/timhieu-ve-mongodb-4P856ajGlY3 [4] Tìm hiều ExpressJS framework (2017, Jul 1) Retrieved from https://viblo.asia/p/phan-1-tim-hieu-express-js-framework-Qbq5Qq7m5D8 [5] Tìm hiểu Reactjs cách sử dụng (2016, Dec 27) Retrieved from https://viblo.asia/p/tim-hieu-reactjs-co-ban-va-cach-su-dung-BYjv4ke0GxpV [6] Le Van Giang (2018, September 15) Redux Retrieved from https://viblo.asia/p/redux-co-ban-m68Z00JdZkG [7] Nguyen Nhat Anh (2018, November 24) Giới thiệu Ant Design Retrieved from https://viblo.asia/p/gioi-thieu-ant-design-L4x5xwzblBM 92 S K L 0