Xây dựng Ứng dụng lập kế hoạch du lịch cá nhân

 Cơ hội kinh doanh và phát triển lâu dài: Ứng dụng lập kế hoạch du lịch cá nhân không chỉ thu hút người dùng đơn thuần mà còn có tiềm năng phát triển thông quacác dịch vụ đối tác như đặ

GIỚI THIỆU ĐỀ TÀI

Tên ứng dụng

XÂY DỰNG ỨNG DỤNG LẬP KẾ HOẠCH DU LỊCH CÁ NHÂN GOTIQ.

Đặt vấn đề

Doanh thu từ hoạt động dịch vụ và du lịch tại Việt Nam tăng mạnh nhờ số lượng khách du lịch nội địa và quốc tế liên tục tăng trong mùa cao điểm, với khách quốc tế đến tháng 7/2023 ước đạt hơn 1 triệu lượt, tăng 6,5% so với tháng trước và gấp 2,9 lần cùng kỳ năm trước Trong 7 tháng đầu năm 2023, tổng số khách quốc tế đến Việt Nam ước đạt hơn 6,6 triệu lượt, gấp 6,9 lần so với cùng kỳ; chỉ sau 7 tháng, ngành du lịch Việt Nam đã đạt 83% kế hoạch cả năm về đón khách quốc tế, nhiều khả năng sẽ hoàn thành mục tiêu sớm và còn nhiều dư địa để tăng trưởng vào mùa cao điểm cuối năm Đồng thời, khách nội địa tháng 7/2023 ước đạt 12,5 triệu lượt, trong đó có 8,3 triệu lượt có lưu trú, đưa tổng khách nội địa trong 7 tháng năm nay lên 76,5 triệu lượt, góp phần đem lại tổng thu từ du lịch ước đạt 416,6 nghìn tỷ đồng, thúc đẩy phát triển kinh tế bền vững.

Hình GIỚI THIỆU ĐỀ TÀI 1: Thống kê doanh thu dịch vụ du lịch các tháng năm

Trong thời đại số hóa hiện nay, nhu cầu di chuyển và du lịch của con người ngày càng tăng cao, khiến việc tìm kiếm, so sánh giá cả và đặt vé máy bay, khách sạn cùng các dịch vụ du lịch khác trở nên phức tạp hơn Người dùng cần một giải pháp tiện lợi, dễ sử dụng và đáng tin cậy để tối ưu trải nghiệm du lịch của mình Một ứng dụng tổng hợp dịch vụ du lịch giúp người dùng dễ dàng tiếp cận thông tin, tiết kiệm thời gian và công sức, đồng thời mở ra cơ hội cho các nhà cung cấp dịch vụ mở rộng thị trường và tiếp cận nhiều khách hàng hơn.

Chúng tôi đã quyết định chọn đề tài "Xây dựng ứng dụng lập kế hoạch du lịch cá nhân - GoTiQ" nhằm phát triển một công cụ tiện ích giúp người dùng dễ dàng lên kế hoạch du lịch cá nhân phù hợp nhất Ứng dụng GoTiQ hướng đến việc nâng cao trải nghiệm người dùng bằng cách cung cấp các đề xuất du lịch cá nhân hóa, từ đó giúp tăng sự hài lòng và giữ chân khách hàng lâu dài Với mục tiêu tối ưu hóa sự phù hợp và thuận tiện, dự án hy vọng trở thành người đồng hành đáng tin cậy cho các nhà du lịch cá nhân.

Lý do chọn thiết kế ứng dụng

Nhu cầu cá nhân hóa trong du lịch đang ngày càng tăng, khi người dùng tìm kiếm những trải nghiệm phù hợp với sở thích và nhu cầu riêng của mình Một ứng dụng lập kế hoạch du lịch cá nhân giúp khách hàng dễ dàng tùy chỉnh hành trình, chọn điểm đến, hoạt động và thời gian phù hợp, thay vì phải dựa vào các gói tour cố định Việc cá nhân hóa trải nghiệm du lịch giúp nâng cao sự hài lòng và tạo sự thuận tiện cho khách hàng trong quá trình lên kế hoạch chuyến đi.

Tối ưu hóa trải nghiệm người dùng là yếu tố hàng đầu trong việc lập kế hoạch du lịch Ứng dụng du lịch giúp tích hợp thông tin từ vé máy bay, khách sạn, địa điểm tham quan và hoạt động vui chơi, giảm thiểu thời gian tra cứu phức tạp Nhờ đó, người dùng có thể dễ dàng lên kế hoạch chi tiết chỉ với vài bước đơn giản, mang đến trải nghiệm du lịch thuận tiện và hiệu quả hơn.

Ứng dụng hỗ trợ dự trù ngân sách và theo dõi hành trình, giúp người dùng quản lý chi phí cho các khoản như vé máy bay, khách sạn và hoạt động Tính năng này giúp kiểm soát ngân sách hiệu quả, đảm bảo chuyến đi không vượt quá ngân sách đề ra Ngoài ra, ứng dụng còn cung cấp chức năng theo dõi lịch trình và nhắc nhở các sự kiện quan trọng, giúp người dùng trải nghiệm du lịch suôn sẻ và không bỏ lỡ bất kỳ hoạt động nào during chuyến đi.

Việc tích hợp công nghệ mới như trí tuệ nhân tạo (AI) và dữ liệu lớn (Big Data) giúp đề xuất các gợi ý du lịch cá nhân hóa dựa trên sở thích và hành vi của người dùng, từ đó nâng cao trải nghiệm người dùng và biến ứng dụng trở thành một công cụ hỗ trợ đắc lực trong việc lập kế hoạch du lịch hiệu quả và chính xác.

Ứng dụng lập kế hoạch du lịch cá nhân không chỉ thu hút người dùng mà còn có tiềm năng phát triển lâu dài thông qua các dịch vụ đối tác như đặt phòng khách sạn, đặt vé máy bay và bán các dịch vụ du lịch khác, giúp tạo ra nguồn thu nhập bền vững và mở rộng trong tương lai.

Mô tả ứng dụng

Ứng dụng lập kế hoạch du lịch cá nhân là nền tảng số giúp người dùng dễ dàng thiết kế, quản lý và tùy chỉnh toàn bộ hành trình du lịch, từ việc lên kế hoạch đến đặt chỗ và theo dõi lịch trình chi tiết Với trải nghiệm cá nhân hóa, ứng dụng tối ưu hóa thời gian và chi phí, mang lại sự thuận tiện và nhanh chóng trong việc lên kế hoạch cho chuyến đi của bạn.

Các tính năng chính của ứng dụng bao gồm:

Lên kế hoạch hành trình chi tiết giúp người dùng dễ dàng lựa chọn điểm đến, thời gian và các hoạt động mong muốn Ứng dụng tự động gợi ý các địa điểm tham quan, nhà hàng và hoạt động phù hợp dựa trên sở thích cá nhân và lịch trình đã lập Việc này tối ưu hóa trải nghiệm du lịch, tiết kiệm thời gian và nâng cao sự hài lòng của khách hàng.

Tìm kiếm và đặt dịch vụ một cách dễ dàng với tính năng tích hợp cho phép khách hàng chọn mua vé máy bay, khách sạn, phương tiện di chuyển như xe hơi hoặc tàu, cùng các tour du lịch và hoạt động vui chơi Người dùng có thể so sánh giá cả, đọc đánh giá từ khách hàng trước đó để lựa chọn dịch vụ phù hợp nhất, nâng cao trải nghiệm đặt dịch vụ thuận tiện và tin cậy.

Ứng dụng cá nhân hóa trải nghiệm du lịch bằng trí tuệ nhân tạo (AI) giúp đề xuất các hoạt động, điểm tham quan và dịch vụ phù hợp dựa trên lịch sử tìm kiếm và sở thích cá nhân của người dùng, nâng cao sự hài lòng và tiện ích cho khách hàng khi khám phá điểm đến mới.

Quản lý ngân sách du lịch là công cụ giúp người dùng dự trù và kiểm soát chi phí cho các hoạt động như phương tiện, khách sạn, ăn uống và giải trí Với tính năng tự động cập nhật, người dùng dễ dàng theo dõi ngân sách khi thay đổi hành trình hoặc thêm dịch vụ mới, đảm bảo kế hoạch tài chính luôn chính xác và hiệu quả.

Ứng dụng quản lý hành trình tự động cập nhật và gửi nhắc nhở về các sự kiện quan trọng như giờ bay, thời gian làm thủ tục check-in khách sạn và các hoạt động đã lên kế hoạch, giúp người dùng luôn theo dõi và thực hiện đúng lịch trình một cách dễ dàng.

Người dùng có thể dễ dàng chia sẻ hành trình của mình với bạn bè, gia đình hoặc cộng đồng du lịch để truyền cảm hứng và kết nối Đồng thời, tính năng lưu trữ các chuyến đi trước giúp người dùng dễ dàng truy cập và tham khảo các hành trình đã trải qua, từ đó nâng cao trải nghiệm du lịch hiệu quả và tiện lợi.

Ứng dụng du lịch cung cấp tính năng đánh giá và nhận xét từ cộng đồng du khách, giúp người dùng dễ dàng tham khảo ý kiến khách quan về các điểm đến Nhờ đó, người dùng có thể đưa ra quyết định du lịch chính xác hơn dựa trên trải nghiệm thực tế của cộng đồng Đồng thời, ứng dụng còn đề xuất các địa điểm du lịch phù hợp dựa trên các đánh giá, tăng khả năng khám phá các điểm đến hấp dẫn Tính năng này giúp nâng cao trải nghiệm của du khách và thúc đẩy chia sẻ thông tin du lịch một cách đáng tin cậy.

Sơ đồ sitemap của ứng dụng

Recommen dation Search trips for

Môi trường thiết kế

Công cụ hỗ trợ

- Photoshop: layout giao diện, hình ảnh, nút lệnh xử lý.

Figma là công cụ giúp tạo ra các bản vẽ wireframe để xác định cấu trúc và bố cục của trang web một cách trực quan và chính xác Ngoài ra, Figma còn cho phép xây dựng các prototype tương tác, giúp thử nghiệm trải nghiệm người dùng trước khi bắt đầu quá trình phát triển Việc sử dụng Figma giúp tối ưu quy trình thiết kế, nâng cao hiệu quả làm việc và đảm bảo sự đồng nhất trong dự án web.

CƠ SỞ LÝ THUYẾT

React Native

React Native là một framework mã nguồn mở do Facebook phát triển, giúp lập trình viên xây dựng ứng dụng di động đa nền tảng Android và iOS chỉ với một codebase duy nhất Framework này cho phép tạo ra các ứng dụng có hiệu suất cao gần như ứng dụng native, đảm bảo trải nghiệm người dùng mượt mà Đồng thời, React Native hỗ trợ nhiều thư viện và module phong phú, giúp tăng tốc quá trình phát triển ứng dụng và tối ưu hóa hiệu quả làm việc của lập trình viên.

React Native sử dụng kiến trúc "Bridge" (cầu nối) giúp kết nối mã JavaScript với mã native, cho phép gọi các thành phần giao diện và API của nền tảng hệ điều hành như Android và iOS Nhờ đó, ứng dụng React Native đạt hiệu suất gần như ứng dụng native Kiến trúc Bridge chia ứng dụng thành ba lớp chính, tối ưu hóa khả năng tương tác giữa mã JavaScript và mã native để phát triển ứng dụng di động hiệu quả và mượt mà.

 JavaScript Thread: Chứa logic của ứng dụng được viết bằng JavaScript.

 Native Thread: Chứa các phần của ứng dụng tương tác trực tiếp với hệ điều hành.

 Bridge: Trung gian, giúp JavaScript và mã native giao tiếp và trao đổi dữ liệu.

2.1.2 Hot reloading và Fast Refresh

React Native hỗ trợ Hot Reloading và Fast Refresh, giúp lập trình viên xem ngay lập tức các thay đổi về giao diện và logic mà không cần xây dựng lại toàn bộ ứng dụng, từ đó giảm thiểu thời gian phát triển và nâng cao hiệu quả làm việc.

React Expo

Expo là bộ công cụ và dịch vụ xây dựng dựa trên React Native, giúp đơn giản hóa và tăng tốc quá trình phát triển ứng dụng di động Với Expo, lập trình viên có thể dễ dàng sử dụng các tính năng và API có sẵn mà không cần phải viết mã native cho Android hoặc iOS Điều này giúp tiết kiệm thời gian, nâng cao hiệu suất phát triển và tối ưu hóa trải nghiệm người dùng.

2.2.1 Các thành phần chính của Expo

 Expo CLI: Một công cụ dòng lệnh giúp tạo và quản lý dự án Expo dễ dàng.

Expo Go là ứng dụng trên iOS và Android giúp lập trình viên chạy và kiểm thử ứng dụng Expo một cách nhanh chóng và dễ dàng mà không cần phải xây dựng lại từ đầu Ứng dụng này tối ưu hóa quá trình phát triển, giảm thiểu thời gian chờ đợi, và nâng cao hiệu quả kiểm thử ứng dụng trên các thiết bị khác nhau Với Expo Go, các nhà phát triển có thể dễ dàng truy cập, thử nghiệm và chia sẻ dự án của mình ngay lập tức, giúp đẩy nhanh tiến trình phát triển phần mềm.

Expo SDK là bộ SDK bao gồm các API và module tích hợp sẵn, giúp phát triển ứng dụng dễ dàng hơn Nó hỗ trợ các tính năng phổ biến như camera, thông báo đẩy, định vị, cảm biến và nhiều chức năng khác, nâng cao trải nghiệm người dùng và tối ưu quá trình phát triển.

Expo Managed Workflow là chế độ quản lý mặc định của Expo, giúp các nhà phát triển dễ dàng phát triển ứng dụng mà không cần thiết lập cấu hình phức tạp cho Android hoặc iOS Đây là lựa chọn phù hợp cho các dự án ứng dụng ở quy mô từ cơ bản đến trung bình, đem lại sự tiện lợi và tiết kiệm thời gian trong quá trình phát triển.

 Dễ dàng thiết lập: Chỉ cần vài dòng lệnh, lập trình viên có thể bắt đầu một dự án mà không cần cấu hình phức tạp.

Với Expo Go, lập trình viên có thể nhanh chóng thử nghiệm và phát triển ứng dụng bằng cách kiểm tra ngay lập tức trên thiết bị thật hoặc giả lập, giúp tiết kiệm thời gian và tăng hiệu quả quy trình phát triển.

 Hỗ trợ đa nền tảng: Các API của Expo thường hoạt động tốt trên cả Android và iOS mà không cần viết mã riêng cho từng nền tảng.

TypeScript

TypeScript là một ngôn ngữ lập trình mã nguồn mở, mở rộng của JavaScript, được phát triển bởi Microsoft, giúp nâng cao hiệu quả lập trình và dễ bảo trì mã nguồn Với đặc điểm chính là khả năng kiểm tra kiểu dữ liệu mạnh mẽ, hỗ trợ lập trình hướng đối tượng và tăng tính khả dụng của các dự án phần mềm lớn TypeScript giúp phát hiện lỗi sớm nhờ vào hệ thống kiểu rõ ràng, đồng thời cải thiện năng suất lập trình viên và tối ưu hoá quá trình phát triển phần mềm.

TypeScript hỗ trợ kiểu dữ liệu tĩnh, giúp xác định rõ ràng kiểu của biến, tham số và giá trị trả về từ hàm Việc sử dụng kiểu dữ liệu tĩnh này giúp phát hiện lỗi sớm trong quá trình biên dịch, tăng độ chính xác và giảm thiểu lỗi khi chạy ứng dụng Các lập trình viên có thể kiểm soát chặt chẽ hơn về kiểu dữ liệu, từ đó nâng cao chất lượng mã nguồn và khả năng bảo trì dự án.

Hình CƠ SỞ LÝ THUYẾT 3: TypeScript static typing

- Interface: TypeScript cho phép định nghĩa interface để mô tả cấu trúc dữ liệu của một đối tượng, giúp tăng tính rõ ràng và tái sử dụng mã.

Hình CƠ SỞ LÝ THUYẾT 4: TypeScript Interface

- Kiểu Liệt Kê (Enum): TypeScript hỗ trợ kiểu liệt kê giúp đặt tên cho một tập hợp các giá trị.

Hình CƠ SỞ LÝ THUYẾT 5: TypeScript Enum

- Union types: TypeScript cho phép kết hợp nhiều kiểu dữ liệu thành một kiểu duy nhất sử dụng kiểu tổng hợp.

Hình CƠ SỞ LÝ THUYẾT 6: TypeScript union types

- Kiểu mảng và Tuple: TypeScript cung cấp kiểu dữ liệu cho mảng và tuple (mảng cố định số lượng phần tử và kiểu cụ thể).

Hình CƠ SỞ LÝ THUYẾT 7: TypeScript array and tuple

- Kiểu hàm (Function types): TypeScript cho phép định kiểu cho hàm, bao gồm kiểu tham số và kiểu trả về.

Hình CƠ SỞ LÝ THUYẾT 8: TypeScript function types

- Kiểu Null và Undefined: TypeScript có thể xác định kiểu null và undefined, giúp giảm thiểu rủi ro khi làm việc với giá trị không xác định.

Hình CƠ SỞ LÝ THUYẾT 9: TypeScript null and undefined

- Generic types: TypeScript hỗ trợ kiểu chung (generic types), cho phép tạo ra các hàm và lớp có thể hoạt động với nhiều kiểu dữ liệu khác nhau.

Hình CƠ SỞ LÝ THUYẾT 10: TypeScript generic types

- Kiểu linh hoạt (Type inference): TypeScript có khả năng suy luận kiểu dữ liệu một cách tự động dựa trên giá trị gán cho biến.

Hình CƠ SỞ LÝ THUYẾT 11: TypeScript type inference

TypeScript hỗ trợ mô-đun giúp tách biệt mã nguồn thành các phần nhỏ và quản lý phạm vi của biến và hàm, từ đó tăng tính tổ chức và dễ bảo trì cho dự án Ngoài ra, TypeScript không chỉ kiểm soát lỗi tại thời điểm biên dịch mà còn cung cấp tính linh hoạt và khả năng mở rộng cho JavaScript, giúp cải thiện hiệu suất và nâng cao hiệu quả trong phát triển ứng dụng web.

Hình CƠ SỞ LÝ THUYẾT 12: TypeScript module

Firebase

Firebase là nền tảng phát triển ứng dụng toàn diện do Google cung cấp, giúp đơn giản hóa quá trình xây dựng và quản lý ứng dụng trên web và di động Nền tảng này cung cấp các dịch vụ backend như cơ sở dữ liệu, xác thực, lưu trữ và các công cụ hỗ trợ khác, giúp lập trình viên phát triển ứng dụng nhanh chóng mà không cần thiết lập backend phức tạp Firebase giúp tối ưu hóa quá trình phát triển ứng dụng, tiết kiệm thời gian và nâng cao hiệu quả cho các nhà phát triển.

2.4.1 Các nhóm dịch vụ của Firebase

Firebase cung cấp nhiều dịch vụ đa dạng, được chia thành ba nhóm chính: Xây dựng và phát triển ứng dụng (Build), nâng cao chất lượng ứng dụng (Quality), cùng với phát triển và tương tác người dùng (Engage) Các dịch vụ trong nhóm Build giúp các nhà phát triển xây dựng ứng dụng mạnh mẽ và linh hoạt, trong khi các công cụ của nhóm Quality giúp đảm bảo hiệu suất và độ ổn định của ứng dụng Nhóm Engage tập trung vào việc tối ưu hóa trải nghiệm người dùng và thúc đẩy sự tương tác, giúp doanh nghiệp xây dựng cộng đồng khách hàng trung thành Với các phân nhóm rõ ràng, Firebase là nền tảng toàn diện hỗ trợ phát triển ứng dụng từ giai đoạn xây dựng đến tối ưu hóa trải nghiệm người dùng.

 Firebase Authentication: Xác thực người dùng dễ dàng bằng nhiều phương thức như

Email, Google, Facebook, GitHub, Apple ID và nhiều phương thức khác Firebase Authentication giúp triển khai hệ thống xác thực bảo mật mà không cần thiết lập server riêng.

Firebase Realtime Database là một cơ sở dữ liệu NoSQL hoạt động theo thời gian thực, giúp đồng bộ dữ liệu nhanh chóng giữa tất cả các thiết bị người dùng Với khả năng cập nhật dữ liệu liên tục, Realtime Database rất phù hợp cho các ứng dụng như chat, bản đồ, bảng tin và các nền tảng yêu cầu sự đồng bộ dữ liệu tức thì.

Cloud Firestore là cơ sở dữ liệu NoSQL hoạt động theo thời gian thực, giúp đồng bộ dữ liệu nhanh chóng giữa tất cả các thiết bị người dùng Với khả năng cập nhật dữ liệu liên tục, Realtime Database phù hợp cho các ứng dụng như chat, bản đồ, bảng tin, mang lại trải nghiệm mượt mà và hiệu quả cho người dùng.

Cloud Functions leverage Firestore, a flexible NoSQL database that offers scalable storage for large applications Firestore organizes data into collections and documents, enabling more flexible querying compared to Realtime Database This makes Firestore an ideal choice for complex applications requiring efficient data management and scalability.

Firebase Hosting is a reliable web application hosting service that enables rapid deployment with automatic SSL, integrated CDN, and support for Progressive Web Apps (PWAs), ensuring fast, secure, and scalable web experiences.

Firebase Analytics là công cụ phân tích dữ liệu người dùng mạnh mẽ và dễ tích hợp, giúp theo dõi các hành vi người dùng, thời gian sử dụng và tỷ lệ chuyển đổi Nhờ các báo cáo chi tiết, Firebase Analytics hỗ trợ tối ưu hóa trải nghiệm người dùng và nâng cao hiệu quả hoạt động của ứng dụng.

Firebase Cloud Messaging (FCM) là dịch vụ gửi thông báo đẩy miễn phí trên cả Android và iOS, giúp tăng cường tương tác của người dùng FCM cho phép gửi thông báo hoặc tin nhắn trực tiếp một cách dễ dàng, nâng cao trải nghiệm người dùng trên các nền tảng di động Sử dụng FCM là giải pháp tối ưu để duy trì liên lạc hiệu quả với khách hàng và thúc đẩy hiệu quả marketing của bạn.

Remote Config cho phép chỉnh sửa và tùy biến ứng dụng từ xa mà không cần cập nhật lại ứng dụng, giúp nhà phát triển dễ dàng điều chỉnh giao diện, thực hiện thử nghiệm A/B và cá nhân hóa trải nghiệm người dùng để tối ưu hóa hiệu quả và sự hài lòng của khách hàng.

Dynamic Links cho phép tạo các liên kết tùy chỉnh (deep links) dẫn trực tiếp đến nội dung cụ thể trong ứng dụng, giúp nâng cao trải nghiệm người dùng Tính năng này rất hữu ích trong các chiến dịch marketing, quảng cáo và chia sẻ nội dung qua mạng xã hội, giúp người dùng dễ dàng truy cập phần quan trọng của ứng dụng một cách nhanh chóng.

Trong chiến lược marketing, chức năng In App Messaging là công cụ gửi tin nhắn trực tiếp ngay trong ứng dụng, giúp tăng cường sự tương tác của người dùng Đây là phương pháp hiệu quả để giới thiệu các tính năng mới, cũng như nhắc nhở người dùng thực hiện các hành động quan trọng như hoàn thành đăng ký hoặc mua hàng Sử dụng In App Messaging giúp tăng khả năng giữ chân khách hàng và nâng cao trải nghiệm người dùng một cách tối ưu.

Google Maps API

Google Maps là dịch vụ bản đồ trực tuyến miễn phí do Google cung cấp, hỗ trợ người dùng tìm đường, chỉ đường và khám phá các địa điểm quan trọng Dịch vụ này hiển thị bản đồ đường sá, đề xuất tuyến đường tối ưu cho từng phương tiện khác nhau, cũng như hướng dẫn cách bắt xe và chuyển tuyến cho phương tiện công cộng như xe buýt và xe khách Ngoài ra, Google Maps còn cung cấp thông tin về các địa điểm nổi bật trong khu vực hoặc trên toàn thế giới, bao gồm các doanh nghiệp, trường học, bệnh viện và cây ATM, giúp người dùng dễ dàng khám phá và định vị mọi nơi một cách chính xác và tiện lợi.

Map API là phương thức cho phép website B sử dụng dịch vụ bản đồ của website A, điển hình là Google Maps, và nhúng vào website của mình Các trang web cá nhân hoặc tổ chức có thể tích hợp Google Maps để hiển thị bản đồ trực tiếp trên trang web của họ, nhờ đó nâng cao trải nghiệm người dùng Các ứng dụng xây dựng dựa trên Maps API giúp tích hợp dễ dàng các chức năng bản đồ và dữ liệu địa lý vào trang web cá nhân hoặc tổ chức Việc sử dụng Map API của Google Maps là cách tối ưu để tối đa hóa khả năng hiển thị bản đồ trực tuyến trên các website.

2.5.3 Ứng dụng của Maps API

Đánh dấu vị trí mong muốn là bước quan trọng để xác định các địa điểm trên bản đồ, giúp người dùng dễ dàng tìm kiếm thông tin chi tiết về nhà hàng, khách sạn, bệnh viện, trường học, cây ATM, ngân hàng hoặc các địa điểm khác Việc này giúp tối ưu hóa trải nghiệm người dùng khi sử dụng bản đồ để định vị và lưu trữ các địa điểm cần thiết, đảm bảo dễ dàng truy cập mọi lúc mọi nơi.

Chức năng chỉ đường đến địa điểm cần tìm giúp người dùng dễ dàng xác định hướng và lựa chọn các cung đường phù hợp Tính năng này cung cấp nhiều lựa chọn với các tuyến đường khác nhau, kèm theo thông tin về thời gian và khoảng cách để người dùng có thể lên kế hoạch di chuyển hiệu quả Ngoài ra, người dùng còn có thể tìm đường đến các địa điểm đã được đánh dấu sẵn trên bản đồ, đảm bảo độ chính xác và tiện lợi cao khi tìm đường đến các địa điểm mong muốn.

Tính năng khoanh vùng các khu vực giúp người dùng dễ dàng xác định và tập trung vào các vùng quan trọng như trung tâm kinh tế, khu đô thị và vùng nông thôn Điều này hỗ trợ trong việc phân tích dữ liệu địa lý chính xác hơn, từ đó đưa ra các quyết định phù hợp về quy hoạch và phát triển khu vực Việc xác định rõ các khu vực mục tiêu cũng nâng cao hiệu quả trong các dự án liên quan đến bất động sản, hạ tầng, và dịch vụ cộng đồng.

Goong

Goong là nền tảng công nghệ chuyên cung cấp dịch vụ bản đồ và định vị, được tối ưu hóa cho thị trường Việt Nam nhằm thay thế Google Maps Goong hỗ trợ lập trình viên tích hợp các chức năng bản đồ, định tuyến và địa lý vào ứng dụng di động hoặc web qua API và SDK, giúp dễ dàng tùy chỉnh và phát triển các giải pháp phù hợp Đây là lựa chọn lý tưởng cho các dự án cần tính năng bản đồ nhưng muốn hạn chế phụ thuộc vào các nền tảng quốc tế hoặc tối ưu hóa cho thị trường Việt Nam.

2.6.2 Các tính năng của Goong

Goong cung cấp API tích hợp các tính năng bản đồ vào ứng dụng để nâng cao trải nghiệm người dùng Công ty còn hỗ trợ SDSK dành cho Android và iOS, giúp hiển thị bản đồ dễ dàng và tích hợp các tính năng định vị, tương tác trên bản đồ một cách hiệu quả.

Dưới đây là các tính năng chính mà Goong cung cấp:

Goong Maps là dịch vụ hiển thị bản đồ tương tự Google Maps nhưng được tối ưu hóa cho dữ liệu Việt Nam, hỗ trợ tích hợp dễ dàng vào các ứng dụng Nền tảng này cung cấp nhiều loại bản đồ đa dạng như bản đồ đường phố, bản đồ vệ tinh và bản đồ địa hình, giúp người dùng dễ dàng lựa chọn phù hợp với nhu cầu Với Goong Maps, việc nhúng bản đồ các khu vực tại Việt Nam vào ứng dụng trở nên đơn giản và hiệu quả hơn, nâng cao trải nghiệm người dùng.

Goong hỗ trợ lập trình viên tích hợp tính năng dẫn đường cho xe máy, ô tô và đi bộ vào ứng dụng của họ thông qua dịch vụ định tuyến và chỉ đường hiệu quả Dịch vụ này cung cấp thời gian ước tính di chuyển và khoảng cách chính xác, giúp tối ưu hóa trải nghiệm người dùng Với sự hỗ trợ của Goong, các nhà phát triển có thể dễ dàng tích hợp các chức năng định vị và hướng dẫn chính xác, nâng cao hiệu quả của các ứng dụng di chuyển và dẫn đường.

Goong là nền tảng giúp chuyển đổi địa chỉ bản đồ hoặc tên địa danh thành toạ độ Vĩ độ, Kinh độ, hỗ trợ tính toán khoảng cách và thời gian giữa nhiều địa điểm Công nghệ này rất hữu ích cho các ứng dụng logistics và giao hàng, tối ưu hoá quá trình vận chuyển và quản lý tuyến đường Với khả năng chuyển đổi linh hoạt giữa địa chỉ và toạ độ, Goong giúp doanh nghiệp nâng cao hiệu quả hoạt động và cải thiện trải nghiệm khách hàng.

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

Usecase

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13: Usecase người dùng

Danh sách các usecase

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 1: Danh sách các usecase

ID Tên usecase Tác nhân Mô tả

UC01 Đăng ký Người dùng Người dùng đăng ký tài khoản.

UC02 Đăng nhập Người dùng Người dùng đăng nhập vào tài khoản.

UC03 Đổi mật khẩu Người dùng Người dùng đổi mật khẩu tài khoản.

UC04 Chỉnh sửa thông tin hồ sơ Người dùng Người dùng chỉnh sửa thông tin hồ sơ.

UC05 Tìm kiếm địa điểm du lịch bằng thanh tìm kiếm

Người dùng Người dùng tìm kiếm địa điểm du lịch bằng thanh tìm kiếm.

UC06 Lọc địa điểm du lịch Người dùng Người dùng lọc địa điểm du lịch theo các tiêu chí.

UC07 Thêm địa điểm vào danh sách yêu thích

Người dùng Người dùng thêm địa điểm vào danh sách yêu thích.

UC08 Xem danh sách địa điểm yêu thích

Người dùng Người dùng quản lý danh sách địa điểm yêu thích của mình.

UC9 Thêm địa điểm vào lịch trình Người dùng Người dùng thêm địa điểm du lịch vào lịch trình của mình.

UC10 Xem lịch trình Người dùng Người dùng xem lịch trình của mình.

UC11 Xoá địa điểm khỏi lịch trình Người dùng Người dùng xoá địa điểm du lịch khỏi lịch trình của mình.

UC12 Xem các bài báo đánh giá Người dùng Người dùng xem các bài báo đánh giá về các địa điểm.

UC13 Đăng xuất Người dùng Người dùng đăng xuất tài khoản.

Đặc tả usecase

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2: Đặc tả usecase đăng ký

ID and Name: UC-1 Đăng ký tài khoản

Created By: Quân Date Created: 4/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý tài khoản

Khách hàng đăng ký tài khoản để có thể sử dụng đầy đủ các dịch vụ của ứng dụng một cách dễ dàng và thuận tiện Để bắt đầu, khách hàng chỉ cần nhấn vào nút "Đăng ký tài khoản mới" trên màn hình đăng nhập Việc này giúp người dùng tạo lập tài khoản nhanh chóng, mở ra cơ hội trải nghiệm các tính năng ưu việt của ứng dụng một cách linh hoạt Đăng ký tài khoản là bước quan trọng để khách hàng có thể tận hưởng dịch vụ một cách trọn vẹn và thuận tiện nhất.

Postconditions: Nếu thành công: Gửi email xác nhận đã đăng kí tài khoản thành công với email này.

Nếu không thành công: Thông báo những lỗi cần sửa để đăng kí lại.

Normal Flow: 1 Người dùng truy cập trang đăng ký tài khoản của ứng dụng.

2 Người dùng cung cấp các thông tin cá nhân yêu cầu như tên, địa chỉ email và mật khẩu.

3 Hệ thống kiểm tra tính hợp lệ của thông tin, bao gồm việc kiểm tra tính hợp lệ của địa chỉ email và độ mạnh của mật khẩu.

4 Nếu thông tin hợp lệ, hệ thống tạo một tài khoản mới cho người dùng và gửi một email xác nhận đến địa chỉ email của người dùng.

5 Người dùng kiểm tra email và nhấn vào đường dẫn xác nhận để kích hoạt tài khoản.

6 Sau khi tài khoản được kích hoạt, người dùng đăng nhập vào tài khoản để sử dụng dịch vụ của ứng dụng.

1 Người dùng cung cấp thông tin cá nhân yêu cầu như tên, địa chỉ email và mật khẩu.

2 Hệ thống kiểm tra tính hợp lệ của thông tin và phát hiện ra rằng địa chỉ email đã được sử dụng để đăng ký tài khoản trước đó.

3 Hệ thống hiển thị một thông báo lỗi và yêu cầu người dùng cung cấp một địa chỉ email khác hoặc yêu cầu người dùng đăng nhập vào tài khoản đã đăng ký trước đó.

4 Nếu người dùng chọn cung cấp địa chỉ email khác, hệ thống quay lại bước 2 của normal flow để kiểm tra tính hợp lệ của địa chỉ email mới.

5 Nếu người dùng chọn đăng nhập vào tài khoản đã đăng ký trước đó, hệ thống chuyển hướng người dùng đến trang đăng nhập và yêu cầu người dùng nhập địa chỉ email và mật khẩu để đăng nhập.

Exceptions: 1.0.E1 Người dùng không thể truy cập trang đăng ký tài khoản do lỗi kết nối mạng hoặc lỗi hệ thống.

1.0.E2 Người dùng cung cấp thông tin không hợp lệ hoặc thiếu thông tin bắt buộc, ví dụ như nhập sai địa chỉ email, không cung cấp mật khẩu hoặc mật khẩu không đủ mạnh.

1.0.E3 Hệ thống gặp lỗi khi tạo tài khoản mới, ví dụ như không thể lưu thông tin tài khoản vào cơ sở dữ liệu hoặc gửi email xác nhận thất bại.

1.0.E4 Người dùng không nhận được email xác nhận do lỗi mạng hoặc lỗi hệ thống email.

1.0.E5 Người dùng nhập sai thông tin khi xác nhận tài khoản, ví dụ như nhấn vào đường dẫn xác nhận sai hoặc nhập sai mã xác nhận.

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3: Đặc tả usecase đăng nhập

ID and Name: UC-2 Đăng nhập

Created By: Quân Date Created: 4/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý tài khoản

Description: Người dùng đăng nhập vào ứng dụng.

Trigger: Người dùng bấm vào nút đăng nhập trên màn hình đăng nhập.

Preconditions: Người dùng đã đăng kí tài khoản và đăng nhập vào ứng dụng.

Postconditions: Nếu thành công: Thông báo thành công, chuyển tiếp khách hàng vào trang chủ của app.

Nếu không thành công: Thông báo lỗi (sai username, password, kết nối mạng, …).

Normal Flow: 1 Người dùng truy cập vào trang đăng nhập của hệ thống.

2 Hệ thống hiển thị một màn hình đăng nhập, yêu cầu người dùng nhập tên đăng nhập và mật khẩu.

3 Người dùng nhập tên đăng nhập và mật khẩu của họ.

4 Người dùng nhấn nút "Đăng nhập".

5 Hệ thống xác minh thông tin đăng nhập của người dùng.

6 Nếu thông tin đăng nhập đúng, hệ thống sẽ cho phép người dùng đăng nhập và chuyển hướng đến trang chính của hệ thống.

7 Nếu thông tin đăng nhập sai, hệ thống sẽ hiển thị một thông báo lỗi và yêu cầu người dùng nhập lại tên đăng nhập và mật khẩu. Alternative

Email chưa được đăng ký

1 Người dùng truy cập trang quên mật khẩu và nhập địa chỉ email hoặc tên đăng nhập của tài khoản đã đăng ký.

2 Hệ thống kiểm tra tính hợp lệ của thông tin và phát hiện ra rằng địa chỉ email hoặc tên đăng nhập không tồn tại trong hệ thống.

3 Hệ thống hiển thị một thông báo lỗi và yêu cầu người dùng nhập lại địa chỉ email hoặc tên đăng nhập.

4 Nếu người dùng cung cấp thông tin hợp lệ, hệ thống tiếp tục quá trình khôi phục mật khẩu theo normal flow.

Người dùng không nhận được email khôi phục mật khẩu

1 Người dùng không nhận được email khôi phục mật khẩu do lỗi mạng hoặc lỗi hệ thống email.

2 Bấm vào nút thử lại để ứng dụng gởi lại email.

Người dùng không nhớ tên tài khoản và email dùng để đăng ký

1 Người dùng không nhớ địa chỉ email hoặc tên đăng nhập của tài khoản đã đăng ký.

2 Hệ thống yêu cầu người dùng cung cấp các thông tin khác để xác minh danh tính, ví dụ như số điện thoại, ngày sinh hoặc câu trả lời bí mật.

3 Nếu người dùng cung cấp thông tin hợp lệ, hệ thống gửi một liên kết khôi phục mật khẩu hoặc mật khẩu tạm thời đến người dùng.

4 Quay lại bước 4 của normal flow.

Exceptions: Người dùng không thể truy cập trang khôi phục mật khẩu do lỗi kết nối mạng hoặc lỗi hệ thống.

Người dùng cần cung cấp đầy đủ và chính xác thông tin hợp lệ để tránh lỗi trong quá trình xác thực Việc nhập sai địa chỉ email hoặc thiếu thông tin xác minh danh tính có thể gây trục trặc trong quá trình xử lý hồ sơ Đảm bảo cung cấp thông tin chính xác và đầy đủ sẽ giúp nâng cao hiệu quả và bảo mật của hệ thống.

Hệ thống gặp phải lỗi khi gửi email khôi phục mật khẩu hoặc tạo mật khẩu tạm thời, dẫn đến việc không thể gửi email hoặc lưu thông tin mật khẩu mới vào cơ sở dữ liệu Các vấn đề này gây gián đoạn quá trình reset mật khẩu và ảnh hưởng đến trải nghiệm người dùng Để đảm bảo hoạt động liên tục, cần kiểm tra, khắc phục các lỗi liên quan đến dịch vụ gửi email và hệ thống lưu trữ dữ liệu mật khẩu tạm thời.

Người dùng không nhận được email khôi phục mật khẩu hoặc mật khẩu tạm thời do lỗi mạng hoặc lỗi hệ thống email.

Người dùng không thể tạo mật khẩu mới do mật khẩu không đủ mạnh hoặc nhập mật khẩu mới không khớp.

Hệ thống không thể lưu mật khẩu mới vào cơ sở dữ liệu.

Người dùng không thể truy cập trang đăng nhập sau khi khôi phục mật khẩu do lỗi kết nối mạng hoặc lỗi hệ thống.

3.3.3 Usecase thay đổi mật khẩu

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 4: Đặc tả usecase thay đổi mật khẩu

ID and Name: UC-3 Thay đổi mật khẩu

Created By: Quân Date Created: 4/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý tài khoản

Description: Người dùng tạo mật khẩu mới cho tài khoản.

Trigger: Người dùng bấm vào nút “Quên mật khẩu” trên màn hình đăng nhập. Preconditions: Người dùng đã đăng kí tài khoản và đăng nhập vào ứng dụng.

Postconditions: Nếu thành công: Thông báo thành công, chuyển tiếp khách hàng vào trang chủ của app.

Nếu không thành công: Thông báo lỗi (sai username, kết nối mạng, …). Normal Flow: 1 Người dùng truy cập vào trang đổi mật khẩu của hệ thống.

2 Hệ thống hiển thị một màn hình đăng nhập, yêu cầu người dùng nhập tên đăng nhập.

3 Người dùng nhập tên đăng nhập của họ.

4 Người dùng nhấn nút "Đăng nhập".

5 Hệ thống xác minh tên đăng nhập của người dùng.

6 Nếu tên đăng nhập đúng, hệ thống sẽ gửi một link đổi mật khẩu vào email người dùng.

7 Người dùng truy cập vào link đổi mật khẩu và nhập mật khẩu mới.

8 Hệ thống lưu lại thông tin mật khẩu mới của người dùng.

Email chưa được đăng ký

5 Người dùng truy cập trang quên mật khẩu và nhập địa chỉ email hoặc tên đăng nhập của tài khoản đã đăng ký.

6 Hệ thống kiểm tra tính hợp lệ của thông tin và phát hiện ra rằng địa chỉ email hoặc tên đăng nhập không tồn tại trong hệ thống.

7 Hệ thống hiển thị một thông báo lỗi và yêu cầu người dùng nhập lại địa chỉ email hoặc tên đăng nhập.

8 Nếu người dùng cung cấp thông tin hợp lệ, hệ thống tiếp tục quá trình khôi phục mật khẩu theo normal flow.

Người dùng không nhận được email khôi phục mật khẩu

3 Người dùng không nhận được email khôi phục mật khẩu do lỗi mạng hoặc lỗi hệ thống email.

4 Bấm vào nút thử lại để ứng dụng gởi lại email.

Người dùng không nhớ tên tài khoản và email dùng để đăng ký

3 Người dùng không nhớ địa chỉ email hoặc tên đăng nhập của tài khoản đã đăng ký.

4 Hệ thống yêu cầu người dùng cung cấp các thông tin khác để xác minh danh tính, ví dụ như số điện thoại, ngày sinh hoặc câu trả lời bí mật.

5 Nếu người dùng cung cấp thông tin hợp lệ, hệ thống gửi một liên kết khôi phục mật khẩu hoặc mật khẩu tạm thời đến người dùng.

6 Quay lại bước 4 của normal flow.

Exceptions: Người dùng không thể truy cập trang khôi phục mật khẩu do lỗi kết nối mạng hoặc lỗi hệ thống.

Người dùng cần cung cấp thông tin chính xác và đầy đủ để đảm bảo quá trình xác thực diễn ra thuận lợi Việc nhập sai địa chỉ email hoặc thiếu thông tin xác minh danh tính có thể gây khó khăn trong việc xử lý dữ liệu và phản hồi từ hệ thống Để tránh sự cố không mong muốn, người dùng nên kiểm tra kỹ lưỡng thông tin trước khi gửi yêu cầu Cung cấp thông tin hợp lệ không chỉ giúp nâng cao trải nghiệm người dùng mà còn đảm bảo quá trình xác minh diễn ra nhanh chóng và hiệu quả.

Hệ thống gặp lỗi khi gửi email khôi phục mật khẩu hoặc tạo mật khẩu tạm thời, dẫn đến việc không thể gửi email thành công hoặc lưu trữ thông tin mật khẩu mới vào cơ sở dữ liệu Các vấn đề này có thể gây gián đoạn quá trình lấy lại tài khoản hoặc đặt mật khẩu mới của người dùng Để đảm bảo hoạt động ổn định, cần kiểm tra và khắc phục các lỗi về hệ thống gửi email và xử lý dữ liệu mật khẩu một cách chính xác Việc khắc phục lỗi này giúp nâng cao trải nghiệm người dùng và duy trì tính bảo mật của hệ thống đăng nhập.

Người dùng không nhận được email khôi phục mật khẩu hoặc mật khẩu tạm thời do lỗi mạng hoặc lỗi hệ thống email.

Người dùng không thể tạo mật khẩu mới do mật khẩu không đủ mạnh hoặc nhập mật khẩu mới không khớp.

Hệ thống không thể lưu mật khẩu mới vào cơ sở dữ liệu.

Người dùng không thể truy cập trang đăng nhập sau khi khôi phục mật khẩu do lỗi kết nối mạng hoặc lỗi hệ thống.

3.3.4 Usecase chỉnh sửa thông tin hồ sơ

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 5: Đặc tả usecase chỉnh sửa thông tin hồ sơ

ID and Name: UC-4 Chỉnh sửa thông tin hồ sơ

Created By: Quân Date Created: 4/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý tài khoản.

Description: Người dùng muốn chỉnh sửa thông tin cá nhân của mình.

Trigger: Người dùng chọn cập nhật tài khoản.

Preconditions: Người dùng đang ở trang tài khoản.

Postconditions: Hệ thống lưu lại thông tin cập nhật.

Normal Flow: 1 Người dùng chỉnh sửa các thông tin muốn thay đổi.

2 Người dùng bấm cập nhật.

3 Hệ thống trả về thông báo kết quả

Người dùng thoát khỏi màn hình chỉnh sửa.

3.3.5 Usecase tìm kiếm địa điểm du lịch bằng thanh tìm kiếm

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 6: Đặc tả usecase tìm kiếm địa điểm du lịch bằng thanh tìm kiếm

ID and Name: UC-5 Tìm kiếm địa điểm du lịch bằng thanh tìm kiếm

Created By: Quân Date Created: 4/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý địa điểm du lịch

Description: Người dùng tìm kiếm địa điểm du lịch bằng cách nhập thông tin vào thanh tìm kiếm.

Trigger: Khách hàng bấm vào biểu tượng tìm kiếm.

Preconditions: Người dùng đã đăng nhập.

Postconditions: Hiển thị danh sách các địa điểm du lịch khớp với từ khoá tìm kiếm.

Normal Flow: 1 Người dùng truy cập trang tìm kiếm sản phẩm, điền thông tin địa điểm và ấn tìm kiếm

2 Hệ thống trả về danh sách các địa điểm khớp với từ khoá.

Exceptions: Hệ thống không tìm thấy địa điểm nào khớp từ khoá tìm kiếm.

3.3.6 Usecase lọc địa điểm du lịch

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 7: Đặc tả usecase lọc địa điểm du lịch

ID and Name: UC-6 Lọc địa điểm du lịch

Created By: Quân Date Created: 4/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý địa điểm du lịch

Description: Người dùng dùng công cụ lọc đề tìm kiếm các địa điểm du lịch mong muốn.

Trigger: Khách hàng bấm vào biểu tượng lọc.

Preconditions: Người dùng đã đăng nhập.

Postconditions: Hiển thị danh sách các địa điểm du lịch khớp với với các điều kiện tìm kiếm.

Normal Flow: 1 Người dùng truy cập trang tìm kiếm sản phẩm, chọn các điều

2 Hệ thống trả về danh sách các địa điểm khớp với các điều kiện đã chọn.

Exceptions: Hệ thống không tìm thấy địa điểm nào khớp với các điều kiện đã chọn. Priority: Trung bình.

3.3.7 Usecase thêm địa điểm vào danh sách yêu thích

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 8: Đặc tả usecase thêm địa điểm vào danh sách yêu thích

ID and Name: UC-7 Thêm địa điểm vào danh sách yêu thích

Created By: Quân Date Created: 4/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý địa điểm du lịch

Description: Người dùng thêm địa điểm du lịch mình thích vào danh sách yêu thích Trigger: Khách hàng bấm vào biểu tượng yêu thích

Preconditions: Người dùng đã đăng nhập.

Postconditions: Địa điểm du lịch được thêm vào danh sách yêu thích của người dùng Normal Flow: 1 Người dùng truy cập vào thông tin của địa điểm du lịch.

2 Người dùng bấm vào nút yêu thích.

3 Hệ thống thêm địa điểm vào danh sách yêu thích của người dùng đó.

Exceptions: Hệ thống không thêm được địa điểm vào danh sách yêu thích của người dùng đó.

3.3.8 Usecase xem danh sách các địa điểm yêu thích

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 9: Đặc tả usecase xem danh sách các địa điểm yêu thích

ID and Name: UC-8 Xem danh sách các địa điểm yêu thích

Created By: Quân Date Created: 8/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý địa điểm du lịch

Description: Người dùng xem địa điểm du lịch mình thích trong danh sách yêu thích Trigger: Khách hàng bấm vào xem danh sách yêu thích

Preconditions: Người dùng đã đăng nhập.

Postconditions: Hiển thị danh sách địa điểm yêu thích của người dùng

Normal Flow: 1 Người dùng bấm vào xem danh sách yêu thích của mình.

2 Hệ thống lấy thông tin danh sách

3 Hệ thống hiển thị thông tin danh sách cho người dùng Alternative

Exceptions: Hệ thống không tìm được sách yêu thích của người dùng đó.

3.3.9 Usecase thêm địa điểm vào lịch trình

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 10: Đặc tả usecase thêm địa điểm vào lịch trình

ID and Name: UC-9 Thêm địa điểm vào lịch trình

Created By: Quân Date Created: 8/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý địa điểm du lịch

Description: Người dùng thêm địa điểm du lịch vào lịch trình của mình

Trigger: Khách hàng bấm nút Thêm địa điểm

Preconditions: Người dùng đã đăng nhập.

Postconditions: Địa điểm được thêm vào lịch trình của người dùng

Normal Flow: 1 Người dùng bấm vào nút Thêm địa điểm

2 Hệ thống lấy thông tin địa điểm và thêm vào lịch trình người dùng

3 Hệ thống hiển thị thông báo đã thêm thành công và hiển thị cho người dùng

Exceptions: Lịch trình của người dùng đã có địa điểm bị trùng khung giờ đó.

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 11: Đặc tả usecase xem lịch trình

ID and Name: UC-10 Xem lịch trình

Created By: Quân Date Created: 8/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý bài nhạc.

Description: Người dùng xem lịch trình du lịch của họ.

Trigger: Người dùng vào xem trang Lịch trình

Preconditions: Người dùng đã đăng nhập

Postconditions: Hiển thị lịch trình của người dùng

Normal Flow: 1 Người dùng bấm vào xem lịch trình du lịch của họ.

2 Hệ thống lấy thông tin lịch trình.

3 Hệ thống hiển thị thông tin cho người dùng Alternative

Exceptions: Người dùng chưa có lịch trình.

3.3.11 Usecase xoá địa điểm du lịch khỏi lịch trình

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12: Đặc tả usecase xoá địa điểm du lịch khỏi lịch trình

ID and Name: UC-11 Xoá địa điểm du lịch khỏi lịch trình

Created By: Quân Date Created: 8/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý địa điểm du lịch

Description: Người dùng xoá địa điểm du lịch khỏi lịch trình của mình

Trigger: Khách hàng bấm nút Xoá địa điểm

Preconditions: Người dùng đã đăng nhập.

Postconditions: Địa điểm được thêm vào lịch trình của người dùng

Normal Flow: 4 Người dùng bấm vào nút Xoá địa điểm

5 Hệ thống xoá địa điểm khỏi lịch trình của người dùng.

6 Hệ thống hiển thị thông báo đã xoá thành công và hiển thị cho người dùng

3.3.12 Usecase xem các bài báo đánh giá

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13: Đặc tả usecase xem các bài báo đánh giá

ID and Name: UC-12 Xem các bài báo đánh giá

Created By: Quân Date Created: 10/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý bài nhạc

Description: Người dùng xem các bài báo đánh giá các địa điểm du lịch.

Trigger: Người dùng chọn trang Khám phá

Preconditions: Người dùng đã đăng nhập tài khoản.

Postconditions: Người dùng xem được các bài báo đánh giá địa điểm.

Normal Flow: 1 Người dùng bấm vào trang Khám phá.

3 Hệ thống hiển thị các bài đánh giá cho người dùng.

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 14: Đặc tả usecase đăng xuất

ID and Name: UC-13 Đăng xuất

Created By: Quân Date Created: 10/11/2024

Primary Actor: Người dùng Secondary

Hệ thống quản lý tài khoản

Description: Người dùng muốn đăng xuất tài khoản.

Trigger: Người dùng bấm nút đăng xuất.

Preconditions: Người dùng đã đăng nhập.

Postconditions: Hệ thống đăng xuất tài khoản người dùng.

Normal Flow: 1 Người dùng bấm nút đăng xuất.

2 Hệ thống đăng xuất tài khoản cho người dùng.

3.4.1 Activity Diagram cho Usecase đăng ký

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 14: Activity Diagram cho Usecase đăng ký

3.4.2 Activity Diagram cho Usecase đăng nhập

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 15: Activity Diagram cho Usecase đăng nhập

3.4.3 Activity Diagram chỉnh sửa thông tin hồ sơ

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 16: Activity Diagram cho Usecase chỉnh sửa hồ sơ

3.4.4 Activity Diagram cho Usecase tìm kiếm địa điểm du lịch bằng thanh tìm kiếm

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 17: Activity Diagram cho Usecase tìm kiếm địa điểm du lịch bằng thanh tìm kiếm

3.4.5 Activity Diagram cho Usecase lọc địa điểm du lịch

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 18: Activity Diagram cho Usecase lọc địa điểm du lịch

3.4.6 Activity Diagram cho Usecase Thêm địa điểm vào danh sách yêu thích

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 19: Activity Diagram cho Usecase Thêm địa điểm vào danh sách yêu thích

3.4.8 Activity Diagram cho Usecase Xem danh sách yêu thích

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 20: Activity Diagram cho Usecase Thêm địa điểm vào danh sách yêu thích

3.4.9 Activity Diagram cho Usecase Thêm địa điểm vào lịch trình

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 21: Activity Diagram cho Usecase Thêm địa điểm vào lịch trình

3.4.10 Activity Diagram cho Usecase xem lịch trình

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 22: Activity Diagram cho Usecase xem lịch trình

3.4.11 Activity Diagram cho Usecase xoá địa điểm du lịch khỏi lịch trình

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 23: Activity Diagram cho Usecase xoá địa điểm du lịch khỏi lịch trình

3.4.12 Activity Diagram cho Usecase xem các bài báo đánh giá du lịch

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 24: Activity Diagram cho Usecase xem các bài báo đánh giá du lịch

3.4.13 Activity Diagram cho Usecase đăng xuất

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 25: Activity Diagram cho Usecase đăng xuất

Thiết kế cơ sở dữ liệu

Hình PHÂN TÍCH THIẾT KẾ HỆ THỐNG 26: Mô hình quan hệ

3.5.2 Mô tả các bảng dữ liệu

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 15: Bảng mô tả User

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh người dùng

2 userName varchar(255) Tên người dùng

3 email varchar(255) Email người dùng

4 createdAt datetime Thời điểm tạo tài khoản

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 16: Bảng mô tả Article

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh bài báo

2 title varchar(255) Tên bài báo

3 author varchar(255) Tác giả bài báo

4 category varchar(100) Danh mục bài báo

5 createdAt datetime Thời điểm đăng bài báo

6 description text Mô tả bài báo

7 location varchar(255) Địa điểm bài báo đề cập

8 rating decimal(3, 1) Đánh giá điểm đến

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 17: Bảng mô tả ArticleImage

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh hình ảnh

2 articleId int Mã định danh bài báo

3 imageUrl text Đường dẫn đến hình ảnh

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 18: Bảng mô tả Channel

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

2 name varchar(255) Unique Tên kênh

3 description text Mô tả kênh

4 createdAt datetime Thời điểm tạo kênh

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 19: Bảng mô tả Post

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh bài viết

2 channelId int Mã định danh kênh

3 userId int Mã định danh người dùng

4 content text Nội dung bài viết

5 createdAt datetime Thời điểm tạo bài viết

6 likes int Số lượng lượt yêu thích

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 20: Bảng mô tả PostImage

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh hình ảnh

2 postId int Mã định danh bài viết

3 imageUrl text Đường dẫn đến hình ảnh

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 21: Bảng mô tả PostComment

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh bình luận

2 postId int Mã định danh bài viết

3 userId text Mã định danh người dùng

4 content text Nội dung bình luận

5 createdAt datetime Thời điểm tạo bình luận

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 22: Bảng mô tả PostHashtag

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh bài viết

2 hashtag varchar(100) Hashtag cho bài viết

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 23: Bảng mô tả UserTrip

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh chuyến đi

2 userId int Mã định danh người dùng

3 destination varchar(255) Địa điểm cho chuyến đi

4 startDate date Ngày bắt đầu

5 endDate date Ngày kết thúc

6 totalNoOfDays int Tổng số ngày cho đi

7 budget varchar(100) Loại ngân sách muốn đi

8 family boolean Đi cùng gia đình không

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 24: Bảng mô tả TripActivity

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh hoạt động

2 tripId int Mã định danh chuyến đi

3 day varchar(50) Ngày mấy của chuyến đi

4 time varchar(50) Thời điểm trong ngày

5 activity text Mô tả hoạt động

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 25: Bảng mô tả TripHotel

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh khách sạn

2 tripId int Mã định danh chuyến đi

3 hotelName varchar(255) Tên khách sạn

4 address text Địa chỉ khách sạn

5 description text Mô tả khách sạn

6 price decimal(10, 2) Giá khách sạn

7 rating decimal(3, 1) Đánh giá khách sạn

8 imageUrl text Đường dẫn ảnh mô tả

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 26: Bảng mô tả PlaceToVisit

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh điểm đến

2 tripId int Mã định danh chuyến đi

3 placeName varchar(255) Tên điểm đến

4 geoCoordinates_lat decimal(10, 7) Vĩ độ điểm đến

5 geoCoordinates_lng decimal(10, 7) Kinh độ điểm đến

6 ticketPricing decimal(10, 2) Giá vé điểm đến

7 timeToTravel varchar(50) Thời gian tham quan

8 placeImageUrl text Đường dẫn ảnh mô tả

Bảng PHÂN TÍCH THIẾT KẾ HỆ THỐNG 27: Bảng mô tả FlightDetail

STT Tên thuộc tính Kiểu Ràng buộc

Giá trị khởi tạo Ý nghĩa

Mã định danh chuyến bay

2 tripId int Mã định danh chuyến đi

3 airline varchar(255) Tên hãng hàng không

4 departureAirport varchar(100) Sân bay khởi hành

5 departureTime datetime Thời điểm khởi hành

6 arrivalAirport varchar(100) Sân bay điểm đến

7 arrivalTime datetime Thời điểm dự tính đến

8 flightNumber varchar(50) Mã số chuyến bay

10 bookingUrl text Đường dẫn đặt vé

XÂY DỰNG ỨNG DỤNG

Thiết kế template ứng dụng

4.1.1 Phác thảo layout ứng dụng

Hình XÂY DỰNG ỨNG DỤNG 27: Layout ứng dụng người dùng

4.1.2 Thu thập dữ liệu Website

Hình XÂY DỰNG ỨNG DỤNG 28: Thu thập hình ảnh

Tạo logo: Tạo logo bằng prompt AI

Hình XÂY DỰNG ỨNG DỤNG 29: Logo website

Hình XÂY DỰNG ỨNG DỤNG 30: Sử dụng bộ font Figtree

4.1.3 Các kỹ thuật thiết kế

Component-Driven Development (CDD) giúp chia trang chủ thành các thành phần nhỏ, mỗi thành phần đảm nhận chức năng riêng biệt, từ đó nâng cao khả năng bảo trì và mở rộng mã nguồn dễ dàng hơn.

- React Hooks: Các hooks như useState, useEffect được sử dụng rộng rãi trong các thành phần để quản lý trạng thái và hiệu ứng phụ.

- Functional Components: Tất cả các thành phần đều được viết dưới dạng functional components, giúp cho code dễ đọc và dễ bảo dưỡng hơn.

- TypeScript: TypeScript được sử dụng để viết các thành phần, giúp kiểm soát lỗi tốt hơn và cung cấp gợi ý tự động khi viết code.

CSS-in-JS, đặc biệt là thư viện styled-components, cho phép viết CSS trực tiếp trong JavaScript, giúp quản lý styles trở nên dễ dàng và linh hoạt hơn Việc sử dụng styled-components giúp tận dụng sức mạnh của JavaScript để tạo ra các styles tùy chỉnh, tối ưu hóa hiệu suất và giảm thiểu sự phụ thuộc vào các file CSS riêng biệt Điều này mang lại lợi ích lớn trong việc xây dựng các ứng dụng React hiện đại, giúp các developer dễ dàng duy trì và mở rộng dự án.

- Image Optimization: Sử dụng thư viện next/image để tối ưu hóa việc tải hình ảnh, giúp tăng tốc độ tải trang.

- Context API: Sử dụng Context API của React để quản lý trạng thái toàn cục và chia sẻ dữ liệu giữa các thành phần.

- Providers: Sử dụng các provider như AuthProvider, ReduxProvider, QueryProvider để cung cấp các dịch vụ cần thiết cho các thành phần con.

- Responsive Design: Sử dụng CSS media queries để tạo ra một thiết kế responsive, giúp trang web hiển thị đúng trên mọi kích cỡ màn hình.

Thiết kế và cài đặt giao diện

Hình XÂY DỰNG ỨNG DỤNG 31: Màn hình hiển thị các trang Register - Login

Mô tả giao diện bao gồm:

 Nút Sign in with Google: đăng nhập bằng tài khoản Google

 Các field thông tin tài khoản: email, password

 Nút Create Account: nếu người dùng chưa có tài khoản

Hình XÂY DỰNG ỨNG DỤNG 32: Màn hình hiển thị trang Home

Trang chủ bao gồm 3 Tab chính:

 My Trip: kế hoạch du lịch của người dùng.

 Discover: khám phá các địa điểm du lịch thông qua khuyến nghị / các bài báo đánh giá.

 Profile: hồ sơ của người dùng.

Nếu người dùng chưa có lịch trình, Nút Start a new trip sẽ hiển thị các step hướng dẫn bắt đầu cho người dùng.

Hình XÂY DỰNG ỨNG DỤNG 33: Màn hình hiển thị trang Home – Chọn Travelling

Who’s Travelling Selection: người dùng chọn loại nhóm cho chuyến du lịch

 Just Me: các chuyến du lịch 1 người

 Couple: các chuyến du lịch cho các cặp tình nhân

 Family: các chuyến du lịch cho gia đình

 Group: các chuyến du lịch cho nhóm bạn bè

Hình XÂY DỰNG ỨNG DỤNG 34: Màn hình hiển thị trang Scheduler

Trang Scheduler hiển thị lịch trình các chuyến du lịch của người dùng.

Hình XÂY DỰNG ỨNG DỤNG 35: Màn hình hiển thị trang MyTrips

Sau khi người dùng đã tạo ít nhất 1 travel plan, trang MyTrips sẽ hiển thị các kế hoạch của người dùng:

 Nút Add (+): tạo thêm plan mới

 Danh sách các plan đã tạo, bao gồm: Hình ảnh minh hoạ, thời gian, loại gói du lịch.

Hình XÂY DỰNG ỨNG DỤNG 36: Màn hình hiển thị trang Trip Detail

Sau khi người dùng đã click vào một plan đã tạo, trang Trip Detail sẽ hiển thị cụ thể kế hoạch của người dùng:

 Thông tin cơ bản của chuyến đi: Tên địa điểm, thời gian, loại gói.

 Giá của chuyến du lịch.

 Gợi ý các khách sạn cho chuyến đi.

 Kế hoạch chi tiết của chuyến đi: lịch trình cụ thể từng ngày / giờ cho chuyến đi được gợi ý.

Hình XÂY DỰNG ỨNG DỤNG 37: Màn hình hiển thị trang Trip Detail

Trang forum sẽ là diễn đàn, nơi người dùng có thể theo dõi và bàn luận trên các kênh (channel) địa điểm.

Giao diện trang chủ forum bao gồm:

 Nút thêm (+): tạo thêm channel.

 Trang chủ của kênh đang xem.

 Thông tin cơ bản của kênh: tên kênh, mô tả kênh, nút theo dõi / bỏ theo dõi kênh, nút tạo bài đăng.

 Danh sách các bài đăng, có thể lọc theo lượt like (Hot posts) and theo thời gian đăng (New posts).

Hình XÂY DỰNG ỨNG DỤNG 38: Màn hình hiển thị trang Create Channel

Giao diện trang Create channel bao gồm:

 Textfield description: mô tả kênh.

 Nút Cancel / Confirm: các nút huỷ / xác nhận tạo kênh.

Hình XÂY DỰNG ỨNG DỤNG 39: Màn hình hiển thị trang Create Post

Giao diện trang Create post bao gồm:

 Hashtag list: danh sách các hashtag của bài viết.

 Textfield post content: nội dung bài đăng.

 Button add images: thêm hình ảnh cho bài viết.

 Nút Cancel / Confirm: các nút huỷ / xác nhận tạo kênh.

Hình XÂY DỰNG ỨNG DỤNG 40: Màn hình hiển thị trang Chat

Giao diện trang Chat bao gồm:

 Text field: ô nhập liệu nội dung cần trao đổi với chat bot.

 Button send: xác nhận gởi câu hỏi với chat bot.

 Recommendation bubble: gợi ý cho câu hỏi kế tiếp có thể hỏi.

Hình XÂY DỰNG ỨNG DỤNG 41: Màn hình hiển thị trang Discover

Giao diện trang Discover bao gồm:

 Search field: ô nhập liệu tìm kiếm đến các bài blog có liên quan tới địa điểm đến.

 Recommendation list: gợi ý các chủ để có thể người dùng có thể quan tâm.

 Blog list: danh sách bài viết liên quan tới điểm du lịch, được đánh giá bởi người dùng.

 Category: người dùng có thể chọn để xem về bài viết liên quan tới quan cảnh, nhà hàng, khu nghĩ dưỡng, …

 Recommendation bubble: gợi ý cho câu hỏi kế tiếp có thể hỏi.

Link source code

Link source code: https://github.com/TinSpaghettiCode/AI-Travel-Planner