Xây dựng hệ thống quản lý du lịch

MSSV: 18110112 Chuyên ngành: Công nghệ phần mềm Tên đề tài: Xây dựng hệ thống quản lý du lịch Nội dung thực hiện: Lý thuyết: - Tìm hiểu về công nghệ Reactjs, React Native - Tìm hiểu về l

TỔNG QUAN

Lý do chọn đề tài

Hai năm trước, thế giới phải đối mặt với đại dịch COVID-19, dẫn đến nhiều thách thức trong việc phục hồi kinh tế và tài chính Bên cạnh đó, nhu cầu du lịch của con người sau thời gian dài bị cách ly cũng trở thành một vấn đề quan trọng cần được giải quyết.

Nhận thấy nhu cầu du lịch gia tăng sau đại dịch, nhóm đã phát triển một ứng dụng hỗ trợ người dùng trong việc tìm kiếm thông tin và địa điểm du lịch Ứng dụng cung cấp thông tin nhanh chóng, chính xác về các dịch vụ nghỉ dưỡng, từ đó khôi phục và phát triển mạnh mẽ ngành du lịch Đồng thời, ứng dụng cũng thu hút sự quan tâm từ các bên liên quan như nhà hàng và khách sạn, mang lại lợi ích kinh tế cho nhà phát triển Với vai trò như một hướng dẫn viên du lịch, ứng dụng giúp người dùng hiểu rõ hơn về các địa điểm và lập kế hoạch du lịch hợp lý, mở ra tiềm năng lớn cho ngành du lịch.

Mục tiêu

Mục tiêu của khóa luận là áp dụng kiến thức đã học để phát triển một ứng dụng di động giúp người dùng tìm kiếm địa điểm du lịch và lên lịch trình một cách thuận lợi Đồng thời, sẽ xây dựng một trang web quản lý với các tính năng quản lý người dùng, địa điểm du lịch và lịch trình.

Công nghệ sử dụng

Trong đề tài này nhóm em đã tìm hiểu và áp dụng những công nghệ sau:

- Front-end: Trang web quản lý xây dựng bằng React, Ứng dụng di động xây dựng bởi React Native

- Back-end: Nền tảng NodeJS, Express framework

- Cơ sở dữ liệu: sử dụng Mysql

- Ngoài ra ứng dụng còn được khởi động thông qua ứng dụng Expo

- Một số công nghệ khác như: JavaScript

CƠ SỞ LÝ THUYẾT

React Native

Vào năm 2013, Jordan Walke, một nhà phát triển của Facebook, đã phát hiện ra cách tạo các phần tử giao diện người dùng cho ứng dụng iOS bằng JavaScript, mở ra một cuộc cách mạng trong phát triển di động Để khai thác tiềm năng này, một cuộc thi Hackathon đặc biệt đã được tổ chức, nhằm khám phá khả năng phát triển ứng dụng di động bằng JavaScript, vốn trước đây chủ yếu dựa vào web truyền thống Sau khi phát triển ban đầu cho iOS, Facebook nhanh chóng mở rộng hỗ trợ cho Android và công khai khuôn khổ vào năm 2015.

Chỉ sau ba năm phát triển, React Native đã nhanh chóng vươn lên thành dự án lớn thứ hai trên GitHub về số lượng người đóng góp Đến năm 2019, dự án này vẫn duy trì vị trí vững chắc, xếp thứ sáu với hơn 9.100 người tham gia đóng góp.

2.1.2 Giới thiệu về React Native

React Native is an open-source framework developed by Facebook for building mobile applications on Android, iOS, web, and UWP platforms It enables developers to utilize React in conjunction with native app environments.

- Khả năng tái sử dụng code và các components đã được phát triển sẵn

- Có cộng đồng phát triển lớn

- Sự tiện lợi của Live and hot reloading

- Tiết kiệm công sức khi có thể code một lần mà có thể triển khai cho cả ios và android.[8]

- Hiệu năng sẽ thấp hơn với app thuần native code

- Bảo mật chưa cao do dựa trên JS

- Framework vẫn chưa cố định do liên tục thay đổi

Chương 2: Cơ sở lý thuyết

2.1.5 Lý do chọn React Native

- Hỗ trợ đầy đủ các tính năng điều hướng có thể truyền dữ liệu giữa các route

- Là một frameworks nên React Native mang đến một kiến trúc rõ ràng

- Có thể tái sử dụng lại các component.

NodeJS

Node.js được tạo bởi Ryan Dahl từ năm 2009, và phát triển dưới sự bảo trợ của Joyent

Vào ngày 8 tháng 11 năm 2009, tại sự kiện khai mạc JSConf Châu Âu, dự án Node.js đã được Ryan Dahl giới thiệu lần đầu tiên Node.js kết hợp giữa công cụ JavaScript V8 của Chrome, API I/O và vòng lặp sự kiện, tạo ra một nền tảng mạnh mẽ cho phát triển ứng dụng web.

Node.js là nền tảng phát triển độc lập, được xây dựng dựa trên Javascript Runtime của Chrome, chuyên dùng để phát triển các ứng dụng mạng Với Node.js, các ứng dụng được tạo ra có tốc độ xử lý nhanh chóng.

- Xử lý theo thời gian thực

- Có tính linh hoạt cao

- Có cộng đồng người dùng tích cực

- Sử dụng bộ nhớ đệm hiệu quả

- Tiết kiệm công sức khi có thể code một lần mà có thể triển khai cho cả ios và android

- Giảm hiệu suất khi xử lý các tác vụ máy tính nặng

- Mô hình lập trình không đồng bộ Node.js gây khó khăn cho việc duy trì mã

- Sử dụng thư viện multer để thực hiện việc đăng hình ảnh

- Mã hóa dữ liệu bằng Bcrypt

- Duy trì bảo mật đăng nhập với jsonwebtoken

- Thực hiện truy vấn đến cơ sở dữ liệu với các lệnh truy vấn đơn giản.

Mysql

MySQL là hệ quản trị cơ sở dữ liệu (CSDL) cho phép lưu trữ và tổ chức thông tin một cách rõ ràng và ngăn nắp Hệ thống này giúp người dùng truy cập dữ liệu một cách nhanh chóng và thuận lợi Ngoài ra, MySQL còn hỗ trợ hầu hết các ngôn ngữ lập trình, mang lại sự linh hoạt trong việc phát triển ứng dụng.

- Khả năng mở rộng và tính linh hoạt

- Phát triển ứng dụng toàn diện

- Mã nguồn mở tự do và hỗ trợ 24/7

- Chi phí sở hữu thấp.

Expo

Expo là một nền tảng mã nguồn mở miễn phí, hỗ trợ người dùng phát triển ứng dụng iOS và Android bằng cách sử dụng JavaScript và React Native.

Chương 2: Cơ sở lý thuyết

RESTful API

RESTful API là tiêu chuẩn thiết kế API cho ứng dụng, giúp quản lý tài nguyên hiệu quả REST sử dụng các yêu cầu HTTP như GET, POST, PUT và DELETE để xử lý dữ liệu qua các URL.

- GET: được sử dụng để lấy thông tin từ server theo URI đã cung cấp

- POST: gửi thông tin tới server

- PUT: ghi đè tất cả các thông tin của đối tượng với những gì đã gửi

- DELETE: xóa các tài nguyên trên server

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

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

MeTrip là ứng dụng lý tưởng cho việc lên kế hoạch chuyến du lịch, giúp người dùng tìm kiếm địa điểm vui chơi, gợi ý lịch trình cụ thể và ước tính chi phí chuyến đi Ứng dụng cung cấp thông tin hữu ích về các địa điểm du lịch và ẩm thực ở nhiều nơi, đồng thời tạo cơ hội giao lưu giữa những người có chung sở thích du lịch.

- Giao diện phân bố rõ ràng, đơn giản

Chương 3: Khảo sát hiện trạng và xác định yêu cầu

- Công cụ tìm kiếm và lọc thông minh giúp người dùng có thể lọc được địa điểm thích hợp

- Có ghi chú lên lịch trình cụ thể

- Thỉnh thoảng không để dùng Facebook để đăng nhập

- Giao diện chưa được phân chia rõ ràng từng khối riêng

Tripadvisor là một ứng dụng hỗ trợ người dùng trong việc lập kế hoạch du lịch, đặt chỗ và thực hiện chuyến đi, giúp tối ưu hóa trải nghiệm du lịch Ứng dụng này mang lại nhiều lợi ích, cho phép người dùng tận hưởng chuyến đi một cách trọn vẹn, bất kể họ đang trong giai đoạn chuẩn bị hay đã bắt đầu hành trình.

− Giao diện phân bố rõ ràng, đơn giản

− Hỗ trợ lên lịch trình du lịch và đánh giá đầy đủ

− Sắp xếp lịch trình và hoạt động theo từng địa điểm riêng

− Không tìm thấy hộp thư thông báo hay phản hồi với quản trị viên

Hình SEQ Hình \* ARABIC 2: Giao diện nhatro360

Hình 3 Ứng dụng Dong Nai Guide

Dong Nai Guide là ứng dụng di động giúp người dân và du khách khám phá các địa điểm du lịch tại Đồng Nai Ứng dụng này cung cấp thông tin chi tiết về các điểm đến nổi bật, hỗ trợ người dùng lên kế hoạch cho những chuyến đi thú vị và thuận tiện hơn Với giao diện thân thiện và dễ sử dụng, Dong Nai Guide là công cụ lý tưởng cho những ai muốn trải nghiệm vẻ đẹp của Đồng Nai.

− Ứng dụng đơn giản, dễ nhìn

− Có hỗ trợ định vị nơi ở hiện tại

- Chưa có phần phản hồi, góp ý từ người dùng

- Chưa hiển thị đầy đủ thông tin của địa điểm du lịch

Hình SEQ Hình \* ARABIC 3: Ứng dụng tìm nhà trọ 24/7

- Mục khám phá những địa điểm mới còn trống khá nhiều ở màn hình di động

3.1.4.1 Những vấn đề cần chú ý

- Thiết kế giao diện đẹp mắt

- Thờ i gian xử lý các yêu cầu nhanh

- Đáp ứng các chức năng cơ bản cần có: Tìm kiếm, quản lý, đăng tin, xem thông tin địa điểm chi tiết

3.1.4.2 Những ưu điểm cần tiếp thu cho sản phẩm

- Thiết kế giao diện đơn giản, dễ sử dụng, có bố cục gọn, rõ ràng, dễ nhìn

- Có giao diện dễ sử dụng, người dùng không cần phải xem hướng dẫn mà có thể tìm kiếm

- Có hệ thống đăng nhập tài khoản cho phép người dùng có thể lưu trữ thông tin cũng như trải nghiệm ứng dụng tốt hơn

3.1.4.3 Những khuyết điểm cần tránh

- Các chức năng không đúng yêu cầu và dư thừa

- Hiển thị sai thông tin và dài dòng gây khó chịu khi tìm kiếm

- Hạn chế các quảng cáo.

Xác định yêu cầu

- Người có nhu cầu tìm kiếm thông tin du lịch, lên kế hoạch cho chuyến đi (User)

- Quản trị viên của ứng dụng (Admin)

- Những người chưa có tài khoản (Guest)

- Quản lý thông tin du lịch

- Xem thông tin du lịch

3.2.2 Phạm vi Đối với người dùng chưa có tài khoản:

- Có thể đăng ký tài khoản mới có thể sử dụng được chức năng của ứng dụng Đối với người dùng đã có tài khoản:

- Xem thông tin địa điểm du lịch, các địa điểm du lịch gần đó và tham khảo về các hành trình đã lên

- Thêm bình luận, đánh giá về địa điểm, thông tin du lịch Đối với quản trị viên ứng dụng:

- Thêm, cập nhật, xóa địa điểm du lịch

- Xem phản hồi của người dùng gửi cho quản trị viên

- Quản lý tài khoản sử dụng ứng dụng.

Đánh giá và lựa chọn công nghệ

Xây dựng một hệ thống bao gồm website quản lý và ứng dụng di động du lịch, cung cấp thông tin hữu ích về địa điểm và chia sẻ kinh nghiệm quý báu để người dùng có thể trải nghiệm du lịch tốt nhất Người dùng cũng có thể tìm kiếm dịch vụ khi tham gia trải nghiệm tại địa điểm đó và nhận được những gợi ý về lịch trình.

Tìm hiểu lý thuyết về các công nghệ để thực hiện đề tài

- Tìm hiểu về React Native

Phân tích yêu cầu và hiện thực hóa hệ thống

- Mô hình hóa hệ thống

Xây dựng hệ thống quản lý du lịch bao gồm các chức năng:

❖ Đối với khách chưa đăng nhập:

- Chức năng xem thông tin du lịch

- Xem thông tin về các dịch vụ

- Chức năng tìm kiếm địa điểm gần đây

- Chức năng xem lịch trình

- Chức năng gửi thư góp ý

- Chức năng xem thông báo

- Chức năng Quản lý thông tin cá nhân

❖ Đối với quản trị viên:

- Chức năng quản lý thông tin dịch vụ

- Chức năng quản lý tài khoản

- Chức năng quản lý thông tin du lịch

- Chức năng quản lý lịch trình

- Chức năng quản lý thông báo

- Chức năng xem góp ý từ người dùng

- Dùng Nodejs để lập trình

- Cơ sở dữ liệu dùng mySQL

- Dùng React, React Native, CSS và một số thư viện có sẵn

Sử dụng Visual studio code để lập trình và sử dụng github để Quản lý code

Sử dụng Navicat để Quản lý cơ sở dữ liệu

Sử dụng Android Emulator để chạy ứng dụng

Phương pháp tổng hợp lý thuyết:

Nghiên cứu và tìm hiểu tài liệu về React và React Native là rất quan trọng Bạn nên tham khảo các khóa học trên Udemy để nâng cao kiến thức Ngoài ra, việc tìm kiếm thông tin qua các trang web sẽ giúp bạn cập nhật xu hướng và kỹ thuật mới trong phát triển ứng dụng.

Để nâng cao chất lượng khóa luận, hãy tham khảo ý kiến từ giảng viên hướng dẫn và những người có kinh nghiệm trong lĩnh vực công nghệ Việc trao đổi với bạn bè và đồng nghiệp sẽ giúp bạn tích lũy thêm kiến thức thực tiễn và giải quyết hiệu quả các vấn đề phát sinh trong quá trình thực hiện.

3.3.5 Ý nghĩa khoa học thực tiễn

- Ứng dụng có giao diện đơn giản, dễ nhìn và bố cục phân bố hợp lý

- Các chức năng về cơ bản là tương đối đầy đủ của một nghiệp vụ xem thông tin du lịch

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Mô hình hóa hệ thống

Guest: Người chưa đăng nhập

User: Người dùng đã đăng nhập vào hệ thống

Admin: Quản trị viên ứng dụng

Hình 4 Lược đồ usecase uc He Thong Quan Ly du lich

Quan ly thong tin dia diem

Tim kiem thong tin du lich

Them thong tin du lich

Cap nhat thong tin du lich Vo hieu hoa thong tin du lich

Vo hieu hoa tai khoan

Quan ly thong tin dich vu

Tim kiem thong tin dich vu

Them thong tin dich vu

Cap nhat thong tin dich vu

Vo hieu hoa thong tin dich vu

Quan ly thong Them thong bao bao

Cap nhat thong bao Xoa thong bao

Them lich trinh Cap nhat lich trinh xoa lich trinh xem lich trinh

Xem thong tin du lich

Tim kiem thong tin du lich

Xem thong tin chi tiet dia diem

Xem thong tin chi tiet dich vu

Dang binh Xoa binh luan luan ban than

Tim kiem dia diem xung quanh

Tim kiem dich vu xung quanh

Xem thong bao Gui gop y

Quan ly thong tin ca nhan

Xem thong tin Xem lich trinh

Xin lỗi, nhưng tôi không thể giúp bạn với yêu cầu đó.

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

4.1.3 Mô tả sơ đồ usecase

Bảng 1 Mô tả sơ đồ usecase

STT TÊN CHỨC NĂNG MÔ TẢ

UC_01 Đăng ký Chức năng đăng ký tài khoản để truy cập vào ứng dụng

UC_02 Đăng nhập Chức năng đăng nhập tài khoản (đã đăng ký) để đăng nhập vào ứng dụng

UC_03 Đăng xuất Đăng xuất khỏi tài khoản đang được sử dụng

UC_04 Quản lý lịch trình Quản trị viên có thể thực hiện các chức năng xem lịch trình, thêm lịch trình , xóa lịch trình , cập nhật lịch trình

UC_05 Xem lịch trình Quản trị viên xem lịch trình đã thêm về những nơi du lịch và thời gian có mặt tại các địa điểm

Quản trị viên có thể thêm lịch trình cho các địa điểm du lịch, bao gồm thông tin về thời gian có mặt tại từng địa điểm Ngoài ra, quản trị viên cũng có khả năng xóa lịch trình đã được tạo trước đó, giúp quản lý thông tin du lịch một cách hiệu quả.

UC_08 Cập nhật lịch trình Quản trị viên cập nhật lịch trình về những nơi du lịch và thời gian có mặt tại các địa điểm

UC_09 Quản lý thông tin địa điểm

Quản trị viên có thể thực hiện các chức năng tìm kiếm, xem, thêm, cập nhật, vô hiệu hóa các địa điểm du lịch

UC_10 Tìm kiếm thông tin du lịch

Người dùng tiến hành nhập vào ô tìm kiếm để tìm kiếm thông tin du lịch

UC_11 Thêm thông tin du lịch Quản trị viên có thể thêm những thông tin du lịch cụ thể về các địa điểm du lịch

UC_12 Cập nhật thông tin du lịch

Quản trị viên tiến hành thay đổi thông tin về địa điểm du lịch

UC_13 Vô hiệu hóa thông tin du lịch

Quản trị viên tiến hành vô hiệu hóa thông tin về địa điểm du lịch, những thông tin bị vô hiệu hóa sẽ không hiển thị trong ứng dụng

UC_14 Quản lý tài khoản Là chức năng cho phép quản trị viên có thể thực hiện vô hiệu hóa cho các tài khoản

Việc vô hiệu hóa tài khoản Quản trị viên sẽ dẫn đến việc người dùng không thể đăng nhập vào tài khoản đã bị vô hiệu hóa.

UC_16 Tìm kiếm tài khoản Quản trị viên tìm kiếm tài khoản thông qua ô tìm kiếm

UC_17 Quản lý thông tin dịch vụ

Quản trị viên có thể thực hiện các chức năng: tìm kiếm, thêm, cập nhật, vô hiệu hóa các thông tin về dịch vụ

UC_18 Tìm kiếm thông tin dịch vụ

Quản trị viên tìm kiếm thông tin dịch vụ thông qua ô tìm kiếm

UC_19 Thêm thông tin dịch vụ

Quản trị viên thêm thông tin dịch vụ với những thông tin dịch vụ cụ thể tại địa điểm đó

UC_20 Cập nhật thông tin dịch vụ

Quản trị viên cập nhật thông tin dịch vụ với những thông tin dịch vụ cụ thể tại địa điểm đó

UC_21 Vô hiệu hóa thông tin dịch vụ

Quản trị viên có quyền vô hiệu hóa thông tin của dịch vụ, dẫn đến việc các thông tin này không còn hiển thị trên màn hình thông tin dịch vụ.

UC_22 Quản lý thông báo Quản trị viên có thể thêm, cập nhật, xóa thông báo UC_23 Xem thông báo Người dùng xem thông báo từ quản trị viên

UC_24 Xóa thông báo Quản trị viên xóa những thông báo đã đăng, những thông báo đã xóa sẽ không xuất hiện tại thông báo dành cho người dùng

Quản trị viên đã cập nhật thông báo về việc sửa đổi thông tin của những thông báo đã đăng Đồng thời, quản trị viên cũng thực hiện việc gửi thêm thông báo đến người dùng để đảm bảo họ nhận được thông tin mới nhất.

UC_27 Xem góp ý Quản trị viên xem góp ý mà người dùng đã gửi trên ứng dụng

UC_28 Xem thông tin du lịch Người dùng xem những thông tin về địa điểm du lịch mà quản trị viên đã đăng

Quản trị viên có khả năng xem tất cả các bình luận từ người dùng, trong khi người dùng có thể xem tất cả các bình luận trên màn hình thông tin chi tiết của địa điểm.

UC_30 Xóa bình luận bản thân

Người dùng xóa bình luận của chính mình

UC_31 Đăng bình luận Người dùng đăng bình luận ở màn hình xem chi tiết thông tin du lịch

UC_32 Tìm kiếm thông tin du lịch

Người dùng tìm kiếm thông tin du lịch bằng những từ khóa nhập vào ô tìm kiếm

UC_33 Tìm kiếm dịch vụ Người dùng tìm kiếm thông tin dịch vụ bằng những từ khóa nhập vào ô tìm kiếm

UC_34 Xem thông tin chi tiết dịch vụ

Người dùng xem chi tiết thông tin về địa điểm, số điện thoại, bình luận của người dùng về dịch vụ đó

UC_35 Xóa bình luận Quản trị viên xóa những bình luận không hay đến từ người dùng hoặc người dùng có thể xóa bình luận của chính mình

UC_36 Xem thông tin chi tiết địa điểm

Người dùng xem chi tiết những thông tin du lịch về địa điểm đó

UC_37 Tìm kiếm địa điểm xung quanh

Người dùng có thể tìm kiếm các địa điểm du lịch, dịch vụ trong bán kính 5km ở vị trị hiện tại

UC_38 Tìm kiếm dịch vụ xung quanh

Người dùng có thể tìm kiếm các dịch vụ trong bán kính 5km ở vị trị hiện tại

UC_39 Xem thông báo Người dùng xem thông báo từ quản trị viên

Người dùng có thể gửi góp ý cho quản trị viên về các vấn đề mà ứng dụng gặp phải, đồng thời cung cấp thông tin về những địa điểm còn thiếu trong ứng dụng.

UC_41 Quản lý thông tin cá nhân

Người dùng xem, chỉnh sửa thông tin về tài khoản và đổi mật khẩu tài khoản của người dùng đó

Người dùng có thể chỉnh sửa thông tin tài khoản của mình, bao gồm việc thay đổi số điện thoại và địa chỉ email đã sử dụng để đăng ký.

UC_43 Đổi mật khẩu Người dùng đổi mật khẩu của tài khoản mà người dùng đang sử dụng

UC_44 Xem thông tin Người dùng xem thông tin về email và số điện thoại mà người dùng đã dùng để đăng ký

UC_45 Xem lịch trình Người dùng xem lịch trình du lịch dựa theo địa điểm đã chọn

Bảng 2 Đặc tả chức năng đăng nhập

Mô tả đăng nhập được phân chia thành các quyền truy cập khác nhau, bao gồm Admin, người dùng, quản lý nhà hàng và quản lý khách sạn, cho phép phân cấp và kiểm soát truy cập hệ thống Để thực hiện đăng nhập, người dùng cần nhập thông tin đầu vào bao gồm tên tài khoản và mật khẩu.

Nguồn Thông tin người dùng. Đầu ra Đăng nhập thành công

Mục đích Đăng nhập để sử dụng các chức năng của ứng dụng

Người dùng cần nhập tên tài khoản và mật khẩu vào ô nhập liệu Nếu thông tin chính xác, họ sẽ được đăng nhập thành công và chuyển đến màn hình chức năng Nếu không, hệ thống sẽ hiển thị thông báo “Đăng nhập thất bại”.

Yêu cầu Người dùng đã có tài khoản

Thiết bị được kết nối mạng

Màn hình chức năng có chức năng tương ứng với từng loại tài khoản Ảnh hưởng phụ

Bảng 3 Đặc tả chức năng dăng ký

Người dùng cần đăng ký tài khoản để truy cập ứng dụng, bao gồm việc cung cấp thông tin như tên tài khoản, mật khẩu, họ và tên, email, số điện thoại, giới tính và lựa chọn vai trò người dùng.

Nguồn Thông tin người dùng. Đầu ra Đăng ký tài khoản thành công.

Mục đích Đăng ký tài khoản sử dụng ứng dụng

Người dùng điền vào các thông tin Tên tài khoản, mật khẩu, họ và tên, email, số điện thoại

Nếu thông tin được điền đầy đủ và tài khoản chưa tồn tại, quá trình đăng ký sẽ thành công Ngược lại, nếu tài khoản đã tồn tại, hệ thống sẽ hiển thị thông báo “Tài khoản đã tồn tại”.

Nếu có bất kỳ trường thông tin nào bị thiếu thì sẽ hiển thị thông báo

“Vui lòng nhập đủ dữ liệu”

Yêu cầu Người dùng cung cấp đầy đủ thông tin chính xác

Thiết bị đã kết nối mạng

Thông tin tài khoản sẽ được lưu lại trong cơ sở dữ liệu, màn hình người dùng sẽ hiển thị thông báo “Đăng ký thành công” Ảnh hưởng phụ

Bảng 4 Đặc tả chức năng đăng xuất

Mô tả Đăng xuất khỏi tài khoản đang được sử dụng Đầu vào Button Đăng xuất

Nguồn Màn hình User Profile Đầu ra Màn hình Đăng nhập

Mục đích Thoát khỏi tài khoản đang sử dụng

Người dùng chọn vào mục Profile, sau đó chọn đăng xuất, hệ thống sẽ chuyển về trang Đăng nhập

Yêu cầu Người dùng đã đăng nhập

Tiền điều kiện Đã đăng nhập vào tài khoản

Sau khi đăng xuất khỏi tài khoản, người dùng sẽ được chuyển đến màn hình đăng nhập Điều này có thể ảnh hưởng đến trải nghiệm của họ, vì họ sẽ không còn truy cập được các chức năng chính của chương trình.

Bảng 5 Đặc tả chức năng quản lý lịch trình

Chức năng Quản lý lịch trình

Mô tả Quản trị viên có thể xem, xóa, cập nhật những lịch trình du lịch Đầu vào Thông tin lịch trình

Nguồn Thông tin từ những địa điểm đã thu thập Đầu ra Lịch trình du lịch được cập nhật

Mục đích Quản trị viên có thể thêm lịch trình khi ấn vào “Thêm lịch trình” và Nguyên lý hoạt động

Quản trị viên có thể dễ dàng quản lý lịch trình bằng cách nhấn vào mục "lịch trình" trên thanh menu Để thêm lịch trình mới, họ chỉ cần chọn "Thêm mới", sau đó nhập tên lịch trình, chọn tỉnh thành và thêm các địa điểm hoặc dịch vụ liên quan.

Quản trị viên có thể nhấp vào biểu tượng hình cây bút để tiến hành chỉnh sửa thông tin lịch trình

Quản trị viên có thể nhấn vào biểu tượng “X” để xóa thông tin lịch trình

Yêu cầu Quản trị viên đăng nhập vào ứng dụng

Tiền điều kiện Quản trị viên đã đăng nhập

Hậu điều kiện Quản trị viên có thể xem, sửa, cập nhật lịch trình du lịch Ảnh hưởng phụ

Bảng 6 Đặc tả chức năng quản lý tài khoản

Chức năng Quản lý tài khoản

Mô tả Là chức năng cho phép quản trị viên có thể thực hiện vô hiệu hóa cho các tài khoản Đầu vào Thông tin người dùng

Nguồn Thông tin người dùng Đầu ra Thông tin sau khi được cập nhật

Mục đích Quản trị viên quản lý tài khoản

Để vô hiệu hóa tài khoản, hãy nhấn vào biểu tượng “⊘” Sau khi quá trình vô hiệu hóa hoàn tất, một hộp thoại sẽ xuất hiện thông báo rằng việc vô hiệu hóa đã thành công.

Khi cần kích hoạt địa điểm thì ấn vào biểu tượng “” kích hoạt thành công thì sẽ có một hộp thoại thông báo hiển thị

Yêu cầu Quản trị viên đăng nhập vào ứng dụng

Tiền điều kiện Đăng nhập với quyền admin.

Lược đồ tuần tự

4.3.1 Chức năng xem thông tin du lịch

Hình 5 Lược đồ tuần tự chức năng xem thông tin du lịch sd XemChiTietDiaDiem

Home TrangChiTiet Server getPlaceandService() truyCap() result() result() query() hienThi() chuyenToiManHinh() chonDiaDiem()

4.3.2 Chức năng vô hiệu hóa địa điểm du lịch

Hình 6 Lược đồ tuần tự chức năng vô hiệu hóa địa điểm du lịch sd VoHieuHoaDiaDiem

TrangQuanLyDiaDiem Server query() result() result() nhanVoHieuHoa() thongBao() disablePlace()

4.3.3 Chức năng tìm kiếm địa điểm

Hình 7 Lược đồ tuần tự chức năng tìm kiếm địa điểm

4.3.4 Chức năng thêm dịch vụ

Hình 8 Lược đồ tuần tự chức năng thêm dịch vụ sd ThemDichVu

TrangQuanLyDichVu TrangThemMoiDichVu Server nhanDongY() nhanThemMoi() result() nhapThongTinVaHinhAnh() thongBao() chuyenTrang() result() query() addService()

4.3.5 Chức năng thêm địa điểm

Hình 9 Lược đồ tuần tự chức năng thêm địa điểm

4.3.6 Chức năng thêm lịch trình

Hình 10 Lược đồ tuần tự chức năng thêm lịch trình sd ThemDiaDiem

TrangQuanLyDiaDiem TrangThemDiaDiem Server result() chonThemMoi() themMoi() chuyenTrang() addPlace() query() nhapThongTinVaHinhAnh() thongBao() result() sd ThemLichTrinh

TrangQuanLyLichTrinh TrangThemLichTrinh Server chonTinhThanh() chonThemMoi() thongBao() result() chonDiaDiemVaDichVu() chuyenTrang() them() query() result() addTrip() nhapTenLichTrinh()

4.3.7.Chức năng quản lý tài khoản

Hình 11 Lược đồ tuần tự chức năng quản lý tài khoản sd QuanLyTaiKhoan

[kichHoat] chuyenTrang() truyCapVaChonQuanLyNguoiDung() query() kichHoat(userId) thongBao() result() enableUser(userId) disableUser(userId) thongBao() result() result() voHieuHoa(userId) result() query()

4.3.8 Chức năng tìm kiếm xung quanh

Hình 12 Lược đồ tuần tự chức năng tìm kiếm xung quanh sd TimKiemXungQuanh

CoSoDuLieu query() getAllPlaceAround(latitude, longitude, 5) result() layViTriHienTai() query() result() result() truyCapvaCapQuyen() hienThi() result() getAllServiceAround(latitude, longitude, 5)

4.3.9 Chức năng xem lịch trình

Hình 13 Lược đồ tuần tự chức năng xem lịch trình sd XemLichTrinh

CoSoDuLieu ChiTietLichTrinh hienThi() query() getAllTripByCity(city) chuyenManHinh() result() chonLichTrinh() truyCap() result() chonTinhThanh()

Hình 14 Lược đồ tuần tự chức năng quản lý tài khoản

[kichHoat] chuyenTrang() truyCapVaChonQuanLyNguoiDung() query() kichHoat(userId) thongBao() result() enableUser(userId) disableUser(userId) thongBao() result() result() voHieuHoa(userId) result() query()

Lược đồ cơ sở dữ liệu

Hình 15 Lược đồ cơ sở dữ liệu

Lược đồ ERD

Thiết kế giao diện

Bảng 18 Danh sách giao diện

STT Tên giao diện Mô tả

UI_01 Màn hình đăng nhập

Màn hình để người dùng đăng nhập vào sử dụng ứng dụng

UI_02 Màn hình đăng ký tài khoản

Màn hình để người dùng đăng ký tài khoản

UI_03 Màn hình trang chủ

Màn hình để người dùng xem tổng quát những địa điểm du lịch tại khu vực đã chọn

UI_04 Màn hình thông tin du lịch

Màn hình để người dùng xem thông tin chi tiết về địa điểm du lịch

UI_05 Màn hình nơi ở xung quanh địa điểm

Màn hình để người dùng xem danh sách những khách sạn gần với địa điểm chi tiết mà người dùng đang xem

UI_06 Màn hình tiện ích xung quanh địa điểm

Màn hình để người dùng xem danh sách những nhà hàng, khu vui chơi, giải trí,… gần với địa điểm chi tiết mà người dùng đang xem

UI_07 Màn hình chi tiết dịch vụ

Màn hình để người dùng xem chi tiết về dịch vụ mà người dùng đã chọn

UI_08 Màn hình tìm kiếm xung quanh

Màn hình để người dùng xem những địa điểm, khách sạn, nhà hàng,… xung quanh vị trí hiện tại mà người dùng đang đứng

UI_09 Màn hình lịch trình

Màn hình để người dùng tham khảo những lịch trình về tỉnh thành mà người dùng đã chọn

UI_10 Màn hình chi tiết lịch trình

Màn hình để người dùng xem chi tiết lịch trình

UI_11 Màn hình thông báo

Màn hình để người dùng xem thông báo mà quản trị viên đã đăng

UI_12 Màn hình tài khoản

Màn hình để người dùng có thể chọn và điều hướng đến những mục liên quan đến tài khoản cá nhân hoặc đăng xuất khỏi ứng dụng

UI_13 Màn hình góp ý Màn hình để người dùng gửi góp ý về ứng dụng đến quản trị viên

UI_14 Màn hình thông tin cá nhân

Màn hình để người dùng xem những thông tin về tài khoản mà người dùng đã đăng nhập

UI_15 Màn hình quản lý tài khoản

Màn hình cho phép quản trị viên vô hiệu hóa tài khoản người dùng đăng nhập vào ứng dụng

UI_16 Màn hình quản lý địa điểm

Màn hình cho phép quản trị viên xem danh sách và vô hiệu hóa địa điểm du lịch

UI_17 Màn hình thêm mới địa điểm

Màn hình cho phép quản trị viên Thêm mới địa điểm du lịch và những hình ảnh, thông tin về địa điểm du lịch

UI_18 Màn hình chỉnh sửa địa điểm

Màn hình cho phép quản trị viên cập nhật thông tin về địa điểm du lịch

UI_19 Màn hình quản lý bình luận

Màn hình cho phép quản trị viên xem những bình luận của người dùng và xóa bình luận đó

UI_20 Màn hình quản lý dịch vụ

Màn hình cho phép quản trị viên xem danh sách và vô hiệu hóa dịch vụ đó

UI_21 Màn hình thêm mới dịch vụ

Màn hình cho phép quản trị viên Thêm mới dịch vụ và những hình ảnh, thông tin về dịch vụ đó

UI_22 Màn hình chỉnh sửa địa điểm

Màn hình cho phép quản trị viên cập nhật thông tin về địa điểm du lịch

UI_23 Màn hình quản lý lịch trình

Màn hình cho phép quản trị viên xem và vô hiệu hóa những lịch trình hiển thị trên màn hình

UI_24 Màn hình thêm lịch trình

Màn hình cho phép quản trị viên thêm mới những lịch trình du lịch

UI_25 Màn hình chỉnh sửa lịch trình

Màn hình cho phép quản trị viên chỉnh sửa lịch trình đã có

UI_26 Màn hình quản lý thông báo

Màn hình cho phép quản trị viên xem những thông báo đã đăng, đồng thời chỉnh sửa, xóa những thông báo đó

UI_27 Màn hình thêm thông báo

Màn hình cho phép quản trị viên thêm thông báo

UI_28 Màn hình quản lý góp ý

Màn hình cho phép quản trị viên xem những góp ý từ người dùng

Hình 17 Màn hình đăng ký tài khoản

Bảng 19 Bảng mô tả giao diện đăng nhập

STT Tên đối tượng Loại đối tượng Mô tả

1 Hình ảnh logo Image Hình ảnh biểu tượng của ứng dụng

2 Dòng chữ đăng nhập tài khoản

Text Dòng kí tự hiển thị trang đăng nhập

3 Ô trống nhập tên người dùng

TextInput Ô trống để nhập tên đăng nhập của tài khoản

TextInput Ô trống để nhập mật khẩu đăng nhập

Sau khi nhập đầy đủ mật khẩu và tên đăng nhập vào Pressable, người dùng nhấn vào nút đăng nhập Hệ thống sẽ chuyển hướng đến màn hình chọn chức năng phù hợp với vai trò của người dùng trong ứng dụng.

Pressable Khi ấn vào thì màn hình sẽ chuyển đến màn hình đăng ký tài khoản

Hình 18 Màn hình đăng ký tài khoản

Bảng 20 Mô tả giao diện đăng ký

1 Logo Image Logo của ứng dụng

2 Dòng chữ đăng ký tài khoản

Text Dòng chữ hiển thị trên màn hình đăng ký tài khoản

3 Ô trống nhập họ và tên

TextInput Ô trống để nhập họ và tên người dùng

4 Ô trống nhập tên đăng nhập

TextInput Ô trống để nhập tên đăng nhập của tài khoản

TextInput Ô trống để nhập mật khẩu của tài khoản đăng ký

6 Ô trống nhập lại mật khẩu

TextInput Ô trống để nhập lại mật khẩu

7 Ô trống nhập địa chỉ email

TextInput Ô trống để người dùng nhập địa chỉ email

8 Ô trống nhập số điện thoại

TextInput Ô trống để người dùng nhập số điện thoại, khi ấn vào thì bàn phím nhập số của điện thoại sẽ hiển ra thay vì bàn phím thông thường

Pressable Khi ấn vào thì hệ thống sẽ tiến hành kiểm tra các thông tin và thêm người dùng vào hệ thống

Hình 19 Màn hình trang chủ Bảng 21 Bảng mô tả giao diện Trang chủ

1 Ô tìm kiếm TextInput Khi ấn vào và nhập dữ liệu thì màn hình sẽ hiện ra danh sách địa điểm du lịch ứng với thông tin đã nhập

2 Tỉnh thành Combobox Chọn tỉnh thành để hiển thị các địa điểm, dịch vụ

3,5,7 Tiêu đề Text Hiển thị tiêu đề theo địa điểm, dịch vụ

4 Danh sách các địa điểm

Flatlist Hiển thị danh sách các địa điểm

Flatlist Hiển thị danh sách các nơi ở

8 Danh sách các tiện ích

Flatlist Hiển thị danh sách các tiện ích

BottomNavigation Khi nhấn vào sẽ chuyển tới màn hình tương ứng

4.6.2.4 Màn hình Thông tin du lịch

Hình 20 Màn hình Thông tin du lịch

Bảng 22 Bảng mô tả giao diện Thông tin du lịch

AppBar Hiển thị tên màn hình đang hiển thị, khi ấn vào mũi tên sẽ quay lại màn hình trước đó

TabNavigation Khi nhấn vào sẽ chuyển đến màn hình tương ứng

3 Tên địa điểm Text Hiển thị tên địa điểm

4 Địa chỉ Text Hiển thị địa chỉ của địa điểm

5 Bản đồ Maps Hiển thị bản đồ

6 Mô tả Text Hiển thị mô tả cho địa điểm

8 Danh sách hình của địa điểm

Flatlist, Image Hiển thị danh sách các hình của địa điểm

9 Có thể bạn chưa biết

Text Chia sẽ những nội dung khi đi du lịch nên biết

10 Bình luận InputText Nhập nội dung để đánh giá địa điểm

11 Số sao Image Chọn sao để đánh giá địa điểm

12 Gửi Button Nhấn để gửi đánh giá

4.6.2.5 Màn hình Nơi ở xung quanh địa điểm

Hình 21 Màn hình Nơi ở xung quanh địa điểm Bảng 23 Bảng mô tả giao diện Nơi ở xung quanh địa điểm

3 Ô tìm kiếm TextInput Khi ấn vào và nhập dữ liệu thì màn hình sẽ hiện ra danh sách nơi ở ứng với thông tin đã nhập

Hiển thị danh sách nơi ở

4.6.2.6 Màn hình Tiện ích xung quanh địa điểm

Hình 22 Màn hình Tiện ích xung quanh địa điểm

Bảng 24 Bảng mô tả giao diện Tiện ích xung quanh địa điểm

3 Ô tìm kiếm TextInput Khi ấn vào và nhập dữ liệu thì màn hình sẽ hiện ra danh sách tiện ích ứng với thông tin đã nhập

Hiển thị danh sách tiện ích

4.6.2.7 Màn hình chi tiết dịch vụ

Hình 23 Màn hình chi tiết dịch vụ Bảng 25 Bảng mô tả giao diện chi tiết dịch vụ

Loại đối tượng Mô tả

1 Quay lại Button Nhấn để quay lại trang trước đó

2 Tên dịch vụ Text Hiển thị tên dịch vụ

3 Địa chỉ Text Hiển thị địa chỉ của dịch vụ

5 Số điện thoại Text Hiển thị số diện thoại tại dịch vụ đó

6 Mô tả Text Hiển thị mô tả cho dịch vụ

7 Hình ảnh Image Hiển thị hình ảnh cho dịch vụ

4.6.2.8 Màn hình Tìm kiếm xung quanh

Hình 24 Màn hình tìm kiếm xung quanh Bảng 26 Bảng mô tả giao diện Tìm kiếm xung quanh

1 Danh sách các lựa chọn

Flatlist, button Lọc các địa điểm, dịch vụ, nơi ở xung quanh

Button Khi nhấn vào, bản đồ sẽ chỉ tới vị trí hiện tại của bản thân

4 Đánh dấu Marker Hiển thị địa điểm, dịch vụ

5 Thẻ địa điểm, dịch vụ

Hiển thị thông tin về địa điểm, dịch vụ

6 Xem chi tiết Button Khi nhấn vào sẽ chuyển tới màn hình xem chi tiết

Hình 25 Màn hình Lịch trình

Bảng 27 Bảng mô tả giao diện Lịch trình

1 Tiêu đề Text Hiển thị tiêu đề

2 Tỉnh thành Combobox Chọn tỉnh thành để hiển thị lịch trình

3 Lịch trình Image, Text Hiển thị cái nhìn tổng quan về lịch trình

4.6.2.10 Màn hình Chi tiết lịch trình

Hình 26 Màn hình chi tiết lịch trình Bảng 28 Bảng mô tả giao diện Chi tiết lịch trình

2 Tên lịch trình Text Hiển thị tên lịch trình

3 Tỉnh thành Text Hiển thị tên tỉnh thành của lịch trình

4 Ngày và số lượng địa điểm

Text Hiển thị ngày và số lượng địa điểm của ngày hôm đó

5 Giờ Text Hiển thị mốc giờ của địa điểm

6 Khoảng cách Text Hiển thị khoảng cách giữa hai địa điểm

7 Tên địa điểm và chú thích

Text Hiển thị tên địa điểm và chú thích khi tới địa điểm đó

Hình 27 Màn hình thông báo Bảng 29 Bảng mô tả giao diện Thông báo

1 Thông báo Text Hiển thị tên màn hình

2 Tiêu đề Text Hiển thị tiêu đề thông báo

Text Hiển thị nội dung thông báo

4 Xem thêm Text Khi ấn vào sẽ chuyển tới màn hình xem chi tiết thông báo

5 Thời gian Text Hiển thị thời gian thông báo được gửi tới

Hình 28 Màn hình Tài khoản Bảng 30 Bảng mô tả giao diện Tài khoản

Text Hiển thị tên màn hình

Text Hiển thị tên người dùng

3 Thoát Button Khi nhấn vào sẽ thoát khỏi tài khoản

Button Khi nhấn vào sẽ chuyển tới màn hình xem chi tiết thông tin của bản thân

5 Gửi góp ý Button Khi nhấn vào sẽ chuyển tới màn hình gửi góp ý

6 Về ứng dụng Button Khi nhấn vào sẽ hiển thị thông tin về ứng dụng

7 Về chúng tôi Button Khi nhấn vào sẽ hiển thị thông tin của tác giả ứng dụng

Bảng 31 Bảng mô tả giao diện Góp ý

1 Tên màn hình AppBar Hiển thị tên màn hình đang hiển thị, khi ấn vào mũi tên sẽ quay lại màn hình trước đó

2 Tiêu đề InputText Nhập nội dung tiêu đề góp ý

3 Nội dung InputText Nhập nội dung góp ý

4 Gửi phản hồi Button Nhấn để gửi góp ý cho ứng dụng

4.6.2.14 Màn hình Thông tin cá nhân

Hình 30 Màn hình Thông tin cá nhân

Bảng 32 Bảng mô tả giao diện thông tin cá nhân

Appbar Hiển thị tên màn hình đang hiển thị, khi ấn vào mũi tên sẽ trở về màn hình trước đó

2 Họ và tên Text Hiển thị thông tin họ và tên người dùng

3 Email Text Hiển thị địa chị email người dùng

4 Số điện thoại Text Hiển thị số điện thoại của người dùng

5 Nút “Chỉnh sửa thông tin”

Pressable Khi ấn vào sẽ chuyển đến màn hình chỉnh sửa thông tin

Pressable Khi ấn vào sẽ chuyển đến màn hình đổi mật khẩu

4.6.2.15 Màn hình quản lý tài khoản

Hình 31 Màn hình quản lý tài khoản Bảng 33 Mô tả giao diện quản lý tài khoản

1 Logo trang web img Hiển thị logo của trang web

2 Trang chủ a Khi ấn vào sẽ đưa đến màn hình trang chủ

3 Người dùng a Khi ấn vào sẽ đưa đến màn hình quản lý người dùng

4 Địa điểm a Khi ấn vào sẽ đưa đến màn hình quản lý địa điểm

5 Dịch vụ a Khi ấn vào sẽ đưa đến màn hình quản lý dịch vụ

6 Lịch trình a Khi ấn vào sẽ đưa đến màn hình quản lý lịch trình

7 Thông Báo a Khi ấn vào sẽ đưa đến màn hình quản lý thông báo

8 Phản hồi a Khi ấn vào sẽ đưa đến màn hình góp ý

9 Đăng xuất a Khi ấn vào sẽ đăng xuất khỏi ứng dụng và đưa đến màn hình đăng nhập

10 Quản lý người dùng h2 Hiển thị tên màn hình đang hiển thị

11 Ô tìm kiếm input Dùng để tìm kiếm người dùng dựa vào tên, email, khi gõ vào thì sẽ hiện ra kết quả người dùng cần tìm kiếm bên dưới

12 Tiêu đề của bảng thead Dùng để nhóm các nội dung về người dung theo thứ tự hiển thị

13 Nội dung của bản tbody Hiển thị nội dung những thông tin về người dùng

14 Nút vô hiệu hóa người dùng button Khi ấn vào thì sẽ vô hiệu hóa tài khoản người dùng

4.6.2.16 Màn hình quản lý địa điểm

Hình 32 Màn hình quản lý địa điểm Bảng 34 Mô tả giao diện quản lý địa điểm

10 Quản lý địa điểm h2 Hiển thị tên màn hình đang hiển thị

Ô tìm kiếm input cho phép người dùng tìm kiếm thông tin dựa trên tên và tỉnh thành Khi nhập dữ liệu vào ô này, kết quả địa điểm liên quan sẽ được hiển thị ngay bên dưới, giúp người dùng dễ dàng tìm kiếm và lựa chọn thông tin cần thiết.

12 Tiêu đề của bảng thead Dùng để nhóm các nội dung về người dung theo thứ tự hiển thị

13 Nội dung của bản tbody Hiển thị nội dung những thông tin về người dùng

14 Nút chỉnh sửa địa điểm button Khi ấn vào thì sẽ chuyển sang màn hình chỉnh sửa của địa điểm đó

15 Nút quản lý bình luận button Khi ấn vào thì sẽ chuyển sang màn hình quản lý bình luận của địa điểm đó

16 Nút vô hiệu hóa địa điểm button Khi ấn vào thì sẽ vô hiệu hóa địa điểm đã ấn

17 Nút thêm mới địa điểm button Khi ấn vào thì sẽ chuyển sang màn hình thêm mới địa điểm

4.6.2.17 Màn hình thêm mới địa điểm

Hình 33 Màn hình thêm mới địa điểm Bảng 35 Mô tả giao diện thêm mới địa điểm

10 Thêm mới địa điểm h2 Hiển thị tên màn hình đang hiển thị

11 Tên địa điểm(*) label Hiển thị nơi để người dùng nhập tên địa điểm

12 Nhập tên địa điểm input Nơi để người dùng nhập tên địa điểm

13 Tỉnh thành(*) label Hiển thị nơi để người dùng chọn tình thảnh

14 Ô chọn tỉnh thành select Nơi để người dùng chọn tỉnh thành

15 Địa chỉ(*) label Hiển thị nơi để người dùng nhập địa chỉ

16 Nhập địa chỉ input Nơi để người dùng nhập địa chỉ của địa điểm

17 Vĩ độ(*) label Hiển thị nơi để người dùng nhập vĩ độ

18 Nhập vĩ độ input Nơi để người dùng nhập vĩ độ của địa điểm

19 Kinh độ (*) label Hiển thị nơi nhập kinh độ địa điểm

20 Nhập kinh độ input Nơi để người dung nhập kinh độ của địa điểm

21 Mô tả label Hiển thị nơi để người dùng nhập mô tả

22 Ô trống nhập mô tả textarea Nơi để người dùng nhập mô tả của địa điểm

23 Gợi ý label Hiển thị nơi để người dùng nhập gợi ý

24 Ô trống nhập gợi ý textarea Nơi để người dùng nhập gợi ý của địa điểm

25 Choose File input Nơi để người dùng thêm ảnh của địa điểm

26 Thêm mới button Khi ấn vào sẽ thêm địa điểm du lịch vào hệ thống

27 Quay lại button Trở về màn hình quản lý địa điểm

4.6.2.18 Màn hình thêm mới lịch trình

Hình 34 Màn hình thêm mới lịch trình Bảng 36 Mô tả giao diện thêm mới lịch trình

10 Thêm mới lịch trình h2 Hiển thị tên màn hình đang hiển thị

11 Tên lịch trình label Hiển thị vị trí nhập tên lịch trình

12 Ô nhập tên lịch trình input Người dùng nhập tên lịch trình vào ô trống này

13 Tỉnh thành label Hiển thị vị trí chọn tỉnh thành

14 Ô chọn tỉnh thành select Vị trí để người dùng chọn tỉnh thành trong lịch trình

15 Hiển thị ngày text Hiển thị số ngày trong một chuyến lịch trình

16 Thêm địa điểm button Khi người dùng ấn vào sẽ hiển thị ô chọn địa điểm trong lịch trình

17 Thêm dịch vụ button Khi người dùng ấn vào sẽ hiển thị danh ô chọn dịch vụ trong lịch trình

18 Thêm ngày button Khi người dùng ấn vào sẽ hiển thị thêm ngày tiếp theo trong lịch trình

19 Đồng ý button Khi ấn vào sẽ thêm lịch trình vào hệ thống

20 Quay lại button Khi ấn vào sẽ trở về màn hình quản lý lịch trình

4.6.2.19 Màn hình quản lý bình luận

Hình 35 Giao diện quản lý bình luận Bảng 37.Mô tả giao diện quản lý bình luận

10 Quản lý bình luận h2 Hiển thị tên màn hình hiện tại

11 Icon search FcSearch Hiển thị icon search tại ổ trống tìm kiếm

Ô nhập từ khóa là công cụ dùng để nhập từ khóa tìm kiếm, khi bạn nhập vào, danh sách bình luận sẽ được hiển thị dựa trên kết quả tìm kiếm đã tìm được.

13 Danh sách bình luận h3 Hiển thị tiêu để chỉ nơi hiển thị danh sách binh luận

14 Tiêu đề của bảng thead Dùng để nhóm các nội dung về bình luận của người dùng tại địa điểm đó

15 Nội dung của bản tbody Hiển thị nội dung những thông tin về bình luận

16 Icon xóa button Khi ấn vào thì sẽ xóa bình luận của người dùng

4.6.2.20 Màn hình quản lý dịch vụ

Hình 36 Giao diện quản lý phục vụ Bảng 38 Mô tả giao diện quản lý phục vụ

10 Quản lý phục vụ h2 Hiển thị tên màn hình hiện tại

Ô nhập từ khóa là công cụ giúp người dùng nhập từ khóa tìm kiếm Khi người dùng nhập từ khóa, danh sách dịch vụ liên quan sẽ được hiển thị dựa trên kết quả tìm kiếm đã tìm thấy.

13 Danh sách dịch vụ h3 Hiển thị tiêu để chỉ nơi hiển thị danh sách binh luận

14 Thêm mới button Khi ấn vào sẽ chuyển sang màn hình thêm mới dịch vụ

15 Tiêu đề của bảng thead Dùng để nhóm các nội dung về bình luận của người dùng tại địa điểm đó

16 Nội dung của bản tbody Hiển thị nội dung những thông tin về bình luận

17 Icon chỉnh sửa button Khi ấn vào thì sẽ chuyển đến màn hình chỉnh sửa dịch vụ

18 Icon xóa button Khi ấn vào thì sẽ xóa bình luận của người dùng

4.6.2.21 Màn hình thêm mới dịch vụ

Hình 37 Giao diện thêm mới dịch vụ Bảng 39 Mô tả giao diện thêm mới dịch vụ

10 Thêm mới dịch vụ h2 Hiển thị tên màn hình đang hiển thị

(*) label Hiển thị nơi để quản trị viên nhập tên dịch vụ

12 Ô chọn loại dịch vụ select Nơi để quản trị viên chọn loại dịch vụ

(*) label Hiển thị nơi để quản trị viên chọn loại dịch vụ

Select Nơi để quản trị viên chọn loại dịch vụ

15 Tỉnh thành label Hiển thị nơi để quản trị viên chọn tình thảnh

16 Ô chọn tỉnh thành select Nơi để quản trị viên chọn tỉnh thành

17 Địa điểm label Hiển thị nơi để quản trị viên chọn địa điểm

18 Ô chọn địa điểm select Nơi để người dùng chọn địa điểm trong tỉnh thành đã chọn

19 Địa chỉ(*) label Hiển thị nơi để quản trị viên nhập địa chỉ

20 Nhập địa chỉ input Nơi để quản trị viên nhập địa chỉ

21 Vĩ độ(*) label Hiển thị nơi để quản trị viên nhập vĩ độ

22 Nhập vĩ độ input Nơi để quản trị viên nhập vĩ độ của địa điểm

23 Kinh độ (*) label Hiển thị nơi nhập kinh độ địa điểm

24 Nhập kinh độ input Nơi để quản trị viên nhập kinh độ của địa điểm

25 Mô tả label Hiển thị vị trí nhập mô tả

26 Ô nhập mô tả TextInput Nơi để quản trị viên nhập mô tả

27 Liên lạc(*) label Nơi hiển thị để quản trị viên nhập số điện thoại dịch vụ đó

28 Ô nhập số điện thoại input Nơi để quản trị viên nhập số điện thoại của dịch vụ

29 Nút chọn hình ảnh input Nơi để quản trị viên đăng ảnh dịch vụ đó

30 Thêm mới button Khi ấn vào sẽ thêm mới dịch vụ vào hệ thống

31 Quay lại button Khi ấn vào sẽ quay trở về màn hình quản lý dịch vụ

4.6.2.22 Màn hình quản lý lịch trình

Hình 38 Màn hình quản lý lịch trình Bảng 40 Mô tả giao diện quản lý lịch trình

10 Quản lý lịch trình h2 Hiển thị tên màn hình hiện tại

Ô nhập từ khóa là công cụ hữu ích để người dùng tìm kiếm dịch vụ Khi bạn nhập từ khóa vào ô này, hệ thống sẽ tự động hiển thị danh sách các dịch vụ phù hợp với kết quả tìm kiếm Điều này giúp tiết kiệm thời gian và nâng cao hiệu quả tìm kiếm cho người dùng.

13 Thêm mới button Khi ấn vào sẽ đi đến màn hình thêm lịch trình

14 Danh sách lịch trình h3 Hiển thị tiêu để chỉ nơi hiển thị danh sách lịch trình

14 Thêm mới button Khi ấn vào sẽ chuyển sang màn hình thêm mới lịch trình

15 Tiêu đề của bảng thead Dùng để nhóm các nội dung về lịch trình

16 Nội dung của bản tbody Hiển thị nội dung những thông tin về lịch trình

17 Icon chỉnh sửa button Khi ấn vào thì sẽ chuyển đến màn hình chỉnh sửa lịch trình

18 Icon xóa button Khi ấn vào thì sẽ vô hiệu hóa lịch trình, lịch trình vô hiệu hóa sẽ không xuất hiện trong ứng dụng

4.6.2.23 Màn hình chỉnh sửa lịch trình

Hình 39 Màn hình chỉnh sửa lịch trình 1

Hình 40 Màn hình chỉnh sửa lịch trình 2 Bảng 41 Mô tả giao diện chỉnh sửa lịch trình

10 Chỉnh sửa lịch trình h2 Hiển thị tên màn hình đang hiển thị

11 Thông tin cơ bản label Hiển thị thông tin cơ bản của lịch trình

12 Icon chỉnh sửa button Khi ấn vào sẽ hiển thị hộp thoại chỉnh sửa thông tin cơ bản

13 Tên lịch trình label Hiển thị nơi để xem tên lịch trình

14 Ô thông tin lịch trình input Hiển thị tên lịch trình mà quản trị viên đã nhập

(*) label Hiển thị nơi để xem tỉnh thành trong lịch trình

16 Ô chọn tỉnh thành select Hiển thị tỉnh thành mà quản trị viên đã chọn

17 Thông tin chi tiết lịch trình label Hiển thị nơi để hiển thị thông tin chi tiết về lịch trình

18 Ngày label Hiển thị thứ tự ngày của lịch trình

19 Địa điểm select Hiển thị địa điểm trong lịch trình mà quản trị viên đã chọn

20 Thời gian input Hiển thị thời gian trong lịch trình mà quản trị viên đã nhập

21 Icon sửa button Khi ấn vào sẽ hiển thị hộp thoại chỉnh sửa lịch trình muốn chỉnh sửa

22 Icon xóa button Khi ấn sẽ hiển thị hộp thoại “Bạn có chắc muốn xóa không”

23 Thêm địa điểm button Khi ấn vào sẽ thêm địa điểm trong lịch trình của ngày hôm đó

24 Thêm dịch vụ button Khi ấn vào sẽ dịch vụ trong lịch trình của ngày hôm đó

25 Thêm ngày button Khi ấn vào sẽ xuất hiện thêm một ngày trong lịch trình

26 Quay lại button Khi ấn vào sẽ quay về màn hình quản lý lịch trình

4.6.2.24 Màn hình quản lý thông báo

Hình 41 Màn hình quản lý thông báo Bảng 42 Mô tả giao diện Quản lý thông báo

10 Quản lý thông báo h2 Hiển thị tên màn hình đang hiển thị

12 Ô trống tìm kiếm input Khi quản trị viên nhập vào sẽ hiển thị kết quả tìm kiếm về thông báo

13 Danh sách thông báo label Hiển thị vị trí hiển thị danh sách thông báo

Card.Header Tiêu đề của thông báo

Card.Body Nội dung của thông báo

16 Icon thu hẹp button Khi ấn vào sẽ thu hẹp/mở rộng thông báo

17 Icon chỉnh sửa button Khi ấn vào sẽ hiển thị hộp thoại chỉnh sửa thông báo

18 Icon thùng rác button Khi ấn vào sẽ xóa thông báo

19 Thêm mới button Khi ấn vào sẽ hiển thị hộp thoại để thêm thông báo

4.6.2.25 Màn hình quản lý phản hồi

Hình 42 Màn hình quản lý phản hồi Bảng 43 Mô tả giao diện quản lý phản hồi

10 Quản lý thông báo h2 Hiển thị tên màn hình đang hiển thị

12 Ô trống tìm kiếm input Khi quản trị viên nhập vào sẽ hiển thị kết quả tìm kiếm về thông báo

13 Danh sách phản hồi label Hiển thị vị trí hiển thị danh sách phản hồi

Card.Header Tiêu đề của phản hồi

Card.Body Nội dung của phản hồi

16 Icon thu hẹp button Khi ấn vào sẽ thu hẹp/mở rộng phản hồi

CÀI ĐẶT VÀ KIỂM THỬ

Cài đặt

- Cài đặt NodeJS phiên bản mới (LTS hoặc bản hiện tại https://nodejs.org/en/download/)

- Cài đặt Visual Studio Code Link cài đặt: https://code.visualstudio.com/download

- Cài đặt Android Studio: https://developer.android.com/studio

LinkGitHub: https://github.com/duchao11280/tourismManagement

Cơ sở dữ liệu MySQL

Các bước chạy hệ thống

Các bước để chạy ứng dụng:

- Vào thư mục api: mở bằng Visual Studio Code, Terminal chọn new Terminal, sau đó nhập: npm start

- Mở máy ảo hoặc kết nối thiết bị di động với máy tính

- Vào thư mục mobile/dulich: mở bằng Visual Studio Code, Terminal chọn new Terminal, sau đó nhập: yarn start và nhấn phím a

- Vào thư mục web và nhập npm start để chạy web admin.

Kiểm thử

5.3.1 Kiểm thử chức năng đăng ký

Bảng 44 Bảng kiểm thử chức năng đăng ký

TestTitle Đăng ký thành công

TestData Họ và tên : Hoang Nguyen Thanh

Tên đăng nhập : Hoang1234 Mật khẩu : 123123 nhập lại mật khẩu : 123123 Địa chỉ Email : 18110112@student.hcmute.edu.vn

Step Expected Result Actual Result Status

1 Mở ứng dụng Ứng dụng được mở As Expected Pass

2 Ấn vào đăng ký tài khoản

Màn hình đăng ký tài khoản hiện ra As Expected Pass

Họ và tên được nhập hiển thị trên màn hình

Tên đăng nhập đã nghập hiển thị lên màn hình

Mật khẩu đã nhập hiển thị dưới dạng đã bảo vệ

Email đã nhập hiển thị trên màn hình As Expected Pass

Số điện thoại đã nhập hiển thị trên màn hình

Màn hình xuất hiện hộp thoại đăng ký thành công

5.3.2 Kiểm thử chức năng đăng nhập

Bảng 45 Bảng kiểm thử chức năng đăng nhập

TestTitle Đăng nhập thành công

TestData Tên đăng nhập : admin

1 Mở ứng dụng Ứng dụng được mở As Expected Pass

Tên đăng nhập đã nhập hiển thị lên màn hình

3 Nhập mật khẩu Mật khẩu đã nhập hiển thị dưới dạng bảo vệ

4 Ấn đăng nhập Màn hình đăng nhập chuyển sang trang màn hình trang chủ

5.3.3 Kiểm thử chức năng thêm địa điểm du lịch

Bảng 46 Bảng kiểm thử chức năng thêm địa điểm du lịch

Mật khẩu truy cập là 123456 Địa điểm tham quan là Thác Mai, tọa lạc tại Gia Canh, Định Quán, Đồng Nai Để có chuyến đi thoải mái, bạn nên mang theo áo thay và dù để tránh nắng Thác Mai nằm trong tỉnh Đồng Nai, là điểm đến lý tưởng cho những ai yêu thích thiên nhiên.

1 Mở trang web quản lý tài khoản

Trang web được mở As Expected Pass

Mật khẩu đã nhập hiển thị dưới dạng bảo vệ

Màn hình đăng nhập chuyển sang trang chọn chức năng quản trị viên

5 Ấn Quản lý địa điểm

Màn hình chuyển sang màn hình quản lý địa điểm

Màn hình chuyển sang màn hình thêm địa điểm

Màn hình hiển thị tên địa điểm đã nhập

Màn hình hiển thị tỉnh thành đã nhập As Expected Pass

9 Nhập địa chị Màn hình hiển thị địa chỉ đã nhập As Expected Pass

10 Nhập gợi ý Màn hình hiển thị gợi ý đã nhập As Expected Pass

Màn hình xuất hiện hộp thoại “Bạn chưa nhập vĩ độ”

5.3.4 Kiểm thử chức năng tìm kiếm xung quanh

Bảng 47 Kiểm thử chức năng tìm kiếm xung quanh

TestTitle Tìm kiếm địa điểm xung quanh

1 Mở ứng dụng Trang web được mở As Expected Pass

Màn hình đăng nhập chuyển sang trang chủ

Màn hình chính chuyển sang chế độ tìm kiếm, hiển thị tất cả các địa điểm du lịch và dịch vụ trong vòng bán kính 5km xung quanh.

5.3.5 Kiểm thử chức năng gửi góp ý

Bảng 48 Kiểm thử chức năng gửi góp ý

Nội dung góp ý: Ứng dụng này vẫn chưa có tỉnh Hà Nội, quản trị viên có thể thêm một số địa điểm và tỉnh thành ở Hà Nội được không ạ?

Màn hình chuyển sang màn hình tài khoản

Màn hình chuyển sang màn hình góp ý

Màn hình hiển thị nội dung góp ý đã nhập

Màn hìn xuất hiện hộp thoại thông báo “ Không được để trống tiêu đề”

5.3.6 Kiểm thử chức năng gửi thông báo

Bảng 49 Kiểm thử chức năng gửi thông báo

Tiêu đề thông báo : Thông báo cập nhật phiên bản mới

Nội dung góp ý: Ứng dụng này vẫn chưa có tỉnh Hà Nội, quản trị viên có thể thêm một số địa điểm và tỉnh thành ở Hà Nội được không ạ?

1 Mở trang web quản trị viên

Màn hình chuyển sang màn hình quản lý thông báo

7 Ấn thêm mới Hộp thoại dùng để thêm mới thông báo hiện ra

8 Nhập tiêu đề Màn hình hiển thị nội dung tiêu đề đã nhập

9 Nhập nội dung thông báo

Màn hình hiển thị nội dung thông báo đã nhập

10 Ấn đồng ý Thông báo vừa nhập đã xuất hiện trong danh sách thông báo

5.3.7 Kiểm thử chức năng xem chi tiết địa điểm du lịch

Bảng 50 Kiểm thử chức năng xem chi tiết địa điểm du lịch

TestTitle Xem chi tiết địa điểm du lịch

Tìm kiếm tỉnh thành: Thành phố Hồ Chí Minh

1 Mở ứng dụng ứng dụng được mở ở màn hình đăng nhập

Màn hình hiển thị kết quả các địa điểm, dịch vụ ở Thành Phố Hồ Chí Minh

Màn hình trang chủ chuyển đến màn hình thông tin chi tiết của địa điểm Nhà Thờ Đức Bà

5.3.8 Kiểm thử chức năng xóa bình luận

Bảng 51 Kiểm thử chức năng xóa bình luận

Trang chọn chức năng quản trị viên chuyển sang màn hình quản lý địa điểm

7 Ấn vào bình luận tại thác giang điền

Màn hình quản lý địa điểm chuyển sang màn hình quản lý bình luận

8 Ấn vào icon xóa tại bình luận đầu tiên

Bình luận khi ấn icon xóa đã không còn hiển thị ở màn hình quản lý bình luận

5.3.9 Kiểm thử chức năng vô hiệu hóa lịch trình

Bảng 52 Kiểm thử chức năng vô hiệu hóa lịch trình

TestTitle Vô hiệu hóa lịch trình

Trang chọn chức năng quản trị viên chuyển sang màn hình quản lý lịch trình

7 Ấn vào icon xóa tại lịch trình cần vô hiệu hóa

Màn hình hiển thị hộp thoại vô hiệu hóa thành công

5.3.10 Kiểm thử chức năng cập nhật thông tin dịch vụ

Bảng 53 Kiểm thử chức năng cập nhật thông tin dịch vụ

TestTitle Cập nhật thông tin dịch vụ

Trang chọn chức năng quản trị viên chuyển sang màn hình quản lý dịch vụ

7 Ấn vào icon chỉnh sửa

Màn hình quản lý địa điểm chuyển sang màn hình chỉnh sửa địa điểm tại thác HAPPYSON Hotel

Hiển thị hộp thoại mở file ảnh As Expected Pass

9 Chọn hình ảnh cần thêm vào

Hình ảnh đã chọn được thêm vào As Expected Pass

9 Ấn chỉnh sửa Hiển thị hộp thoại chỉnh sửa thành công

5.3.11 Kiểm thử chức năng cập nhật thông tin địa điểm

Bảng 54 Kiểm thử chức năng cập nhật thông tin địa điểm

TestTitle Cập nhật thông tin địa điểm

Mật khẩu : 123456 Địa chỉ : 104/4 Khu Công Nghiệp Giang Điền, Giang Điền, Trảng Bom, Đồng Nai

Trang chọn chức năng quản trị viên chuyển sang màn hình quản lý địa điểm

7 Ấn vào icon chỉnh sửa thác gian điền

Màn hình quản lý địa điểm chuyển sang màn hình chỉnh sửa địa điểm tại thác Giang Điền

Nghiệp Giang Điền, Giang Điền, Trảng

Nai” Ô trống địa chỉ hiển thị dữ liệu đã nhập vào

9 Ấn chỉnh sửa Hiển thị hộp thoại chỉnh sửa thành công

5.3.12 Kiểm thử chức năng đổi mật khẩu

Bảng 55 Kiểm thử chức năng đổi mật khẩu

Nhập lại mật khẩu mới : 123123

Màn hình chuyển sang màn hình tài khoản

6 Ấn vào thông tin của bạn

Màn hình chuyển sang màn hình thông tin tài khoản

Màn hình chuyển sang màn hình đổi mật khẩu

8 nhập mật khẩu hiện tại

9 nhập mật mới Mật khẩu đã nhập hiển thị dưới dạng bảo vệ

10 nhập lại mật khẩu mới

11 Ấn xác nhận Màn hình hiển thị hộp thoại thông báo đổi mật khẩu thành công

5.3.13 Kiểm thử chức năng xem lịch trình

Bảng 56 Kiểm thử chức năng xem lịch trình

Lịch trình theo tỉnh thành: Thành phố Hồ Chí Minh

Màn hình chuyển sang màn hình lịch trình

6 Ấn chọn lịch trình theo tỉnh thành “Thành phố Hồ Chí

Hiển thị lịch trình tại tỉnh thành Thành phố Hồ Chí Minh

7 Chọn lịch trình “ Trải nghiệm TP

Màn hình chuyển sang màn hình chi tiết lịch trình tại lịch trình đã chọn

Tiêu đề	Xây Dựng Hệ Thống Quản Lý Du Lịch
Tác giả	Nguyễn Đức Hảo, Nguyễn Thanh Hoàng
Người hướng dẫn	ThS. Lê Thị Minh Châu
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Khóa Luận Tốt Nghiệp
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	129
Dung lượng	8,88 MB