CÔNG NGHÊ FLUTTER
Tìm hiểu về công nghệ Flutter
Flutter là mobile UI framework của Google để tạo ra các giao diện chất lượng cao trên iOS và
Android trong khoảng thời gian ngắn Flutter hoạt động với những code sẵn có được sử dụng bởi các lập trình viên, các tổ chức
Phiên bản đầu tiên của Flutter, mang tên "Sky", được giới thiệu tại hội nghị nhà phát triển Dart năm 2015 và hoạt động trên hệ điều hành Android Mục tiêu ban đầu của Flutter là cung cấp khả năng kết xuất ổn định.
Tại hội nghị Google Developer Days diễn ra ở Thượng Hải, Google đã công bố phiên bản Flutter Release Preview 2, đánh dấu phiên bản lớn cuối cùng trước khi chính thức ra mắt Phiên bản này hỗ trợ 120 khung hình trên giây, mang đến trải nghiệm mượt mà hơn cho người dùng.
Flutter 1.0 Vào ngày 4 tháng 12 năm 2018, Flutter 1.0 đã được phát hành tại sự kiện Flutter Live, là phiên bản "ổn định" đầu tiên của khung ứng dụng này
Flutter là mobile UI framework của Google để tạo ra các giao diện chất lượng cao trên iOS và
Android trong khoảng thời gian ngắn Flutter hoạt động với những code sẵn có được sử dụng bởi các lập trình viên, các tổ chức
Flutter sử dụng ngôn ngữ DART cũng do Google phát triển và flutter cũng đã được sử dụng để tạo ra các ứng dụng native cho Google
Flutter was developed to address common challenges in mobile development, specifically Fast Development and Native Performance Unlike React Native, which focuses solely on Fast Development, and pure native code, which guarantees Native Performance, Flutter successfully combines both capabilities.
Flutter hoàn toàn miễn phí và cũng là mã nguồn mở b Sự khác biệt giữa Flutter và các công nghệ khác
- Là một bộ SDK đa nền tảng, các ứng dụng Flutter có thể hoạt động trên cả iOS và Android
- Chúng chạy trên engine render Flutter (được viết bằng C++) và Flutter Framework (được viết bằng Dart, cũng như các ứng dụng Flutter)
Flutter được phát triển với mục tiêu đạt tốc độ khung hình 60fps, mang lại trải nghiệm mượt mà cho người dùng Mặc dù tốc độ này không hiếm gặp trên iOS, nhưng trên Android, sự khác biệt về hiệu suất có thể nhận thấy ngay lập tức.
- Hỗ trợ Hot ReLoad rất tiện lợi, giảm thời gian debug từ đó dẫn đến hiệu quả cao hơn khi thực hiện
So sánh nhỏ giữa Flutter và React native
Khả năng tái sử dụng mã nguồn của Flutter cho phép bạn ghi đè lên mã cũ một cách hiệu quả Nếu bạn dự định sử dụng lại mã, Flutter là lựa chọn tối ưu nhất để tối đa hóa việc tái sử dụng này.
React Native cho phép tái sử dụng mã nguồn, tuy nhiên, điều này chỉ áp dụng cho một số thành phần cơ bản Việc định nghĩa các kiểu dáng cho nền tảng React Native có thể tốn nhiều thời gian.
Các thư viện Third Party Có nhiều các third-party packages đang được sử dụng và đang ngày càng được phát triển, và chúng thực sự rất hữu dụng
Kể từ khi React Native trở nên phổ biến, nhiều gói bên thứ ba đã được phát triển và sử dụng rộng rãi trong các ứng dụng, cho phép linh hoạt thêm bớt các thành phần Với khoảng 111k sao trên Github, Flutter đã trở thành xu hướng nổi bật trong lĩnh vực phát triển ứng dụng.
Như Google đã giới thiệu về framework này Nó chắc chắn muốn trở thành một nền tảng phổ biến trong sự lựa chọn của các developer
With 92k stars on GitHub, React Native boasts a growing number of developers, primarily due to the ease of use for JavaScript developers with its libraries.
Cộng đồng phát triển Flutter đã nhanh chóng lớn mạnh kể từ khi nền tảng này ra mắt, với hàng loạt bài viết hướng dẫn và tài nguyên hữu ích được chia sẻ trực tuyến, giúp người dùng dễ dàng bắt đầu viết ứng dụng di động đầu tiên của mình.
React Native đã được phổ biến từ lâu, vì thế cho nên nó cũng có rất nhiều các cộng đồng để hỗ trợ online
Các lập trình viên có kinh nghiệm trong JavaScript sở hữu những kỹ năng quý giá, giúp họ giải quyết hiệu quả mọi vấn đề trong quá trình phát triển Những ưu điểm của họ bao gồm khả năng tối ưu hóa mã, cải thiện hiệu suất và tạo ra các giải pháp sáng tạo Tuy nhiên, cũng cần lưu ý đến một số nhược điểm có thể phát sinh trong quá trình làm việc.
- Ngôn ngữ Dart: Dart - OOP, nó khá dài, nhưng những người quen viết bằng Java / C # sẽ hài lòng với Dart
- Ít phải viết các config khi tạo project mới theo cách thủ công, ngược lại với React Native
To get started with Flutter, simply download it from Git and run "flutter doctor" to identify any potential issues with your system Next, create a project using Android Studio or any compatible IDE after installing the Flutter plugin Additionally, Flutter offers a hot-reload feature similar to React Native, enhancing the development experience.
- Hỗ trợ tuyệt vời cho IDE (Android Studio, IDE IntelliJ, VSCode)
Flutter cung cấp một trình điều hướng tích hợp sẵn, cho phép bạn tạo ra các route mới dễ dàng mà không cần phải kết nối với bất kỳ gói điều hướng nào khác, khác với React Native, nơi yêu cầu bạn phải tích hợp các package điều hướng gốc.
- Giải pháp quản lý dữ liệu được tạo sẵn, ví dụ trong Flutter này là "Mọi thứ đều có một
StatefulWidget là một loại widget đặc biệt cho phép quản lý và thay đổi trạng thái của widget một cách linh hoạt và năng động.
Nhược điểm: Đồ Án 2 : SE122.L11.PMCL – VN 3
Một trong những rào cản lớn đối với những người chỉ học JavaScript hoặc đến từ React Native là việc Dart được thiết kế với các khái niệm như thừa kế, đa hình và các nguyên tắc của lập trình hướng đối tượng (OOP).
Trong Dart, không sử dụng JSX như chúng ta thường thấy trong React Native, dẫn đến việc tệp Dart không có sự phân chia rõ ràng giữa template, styling và data, điều này có thể gây khó khăn cho người phát triển.
Kiến trúc Flutter
Flutter được xây dựng như một hệ thống đa lớp và có khả năng mở rộng, bao gồm nhiều thư viện độc lập mà mỗi thư viện phụ thuộc vào lớp dưới Không có lớp nào có quyền truy cập đặc biệt vào lớp bên dưới, đảm bảo tính độc lập và khả năng thay thế cho mọi phần trong framework.
Các ứng dụng Flutter được đóng gói giống như các ứng dụng gốc khác trên hệ điều hành, với một platform-specific embedder cung cấp entrypoint Embedder này phối hợp với hệ điều hành để truy cập các dịch vụ quan trọng như rendering surfaces, accessibility, input, và quản lý message event loop.
- Embedder được viết bằng ngôn ngữ phù hợp với nền tảng: hiện tại là Java và C++ cho
Android, Objective- C/Objecttive-C++ cho iOS và macOS, và C++ cho Windows và Linux
Using the embedder, Flutter code can be integrated into existing applications as a module or can encompass the entire application content Additionally, the Flutter Engine plays a crucial role in this integration process.
- Cốt lõi của Flutter là Flutter Engine, phần lớn được viết bằng C++, có các nguyên tắc cần thiết để hỗ trợ tất cả ứng dụng Flutter
Engine chịu trách nhiệm chuyển đổi các cảnh hợp thành khi cần thiết thiết kế một frame mới Nó cung cấp khả năng triển khai các API cốt lõi của Flutter, bao gồm đồ họa qua Skia, bố trí văn bản, I/O file và mạng, trợ năng, kiến trúc plugin, và công cụ biên dịch Dart runtime.
Engine của Flutter tương tác với framework thông qua thư viện dart:ui, bao gồm mã C++ được bao bọc trong các lớp Dart Thư viện này cung cấp các lớp để điều khiển hệ thống nhập liệu, đồ họa và việc hiển thị văn bản.
Flutter Framework là môi trường tương tác cho các nhà phát triển, cung cấp một framework hiện đại và phản ứng, được viết bằng ngôn ngữ Dart Nó bao gồm một bộ thư viện phong phú về các nền tảng và bố cục, với nhiều lớp từ dưới lên.
• Foundation: Được xem là core library, định nghĩa và cung cấp các utility classes, functions và được nhiều layer khác sử dụng trong Flutter
Animation, Painting và Gesture là những thư viện cung cấp các khối xây dựng cơ bản cho việc thực hiện hóa chuyển động trong Flutter, hỗ trợ xây dựng giao diện người dùng và nhận dạng tương tác cử chỉ.
• Rendering: Trong Flutter, các UI components được tổ chức dưới dạng cây phân tầng với mỗi node là 1 RenderObject
Widgets, inspired by React and built with Dart, are structured as a tree with objects that inherit from RenderObject The core idea of widgets is to create user interfaces (UI) using these components, which also receive and store their state.
UI, và sẽ rebuild nếu state thay đổi
• Material/Cupertino: Được xây dựng từ Widgets library để triển khai ngôn ngữ thiết kế Material hoặc iOS (Cupertino)
Kết luận
Choose Flutter for cross-platform development, appealing UI, excellent native performance, faster time-to-market, and to leverage the competitive advantages of Dart in your programming environment.
- Flutter dù mới nhưng cũng là một công nghệ mà những nhà phát triển mobile không thể không biết đến
- Tại thời điểm viết báo cáo (01/2021), Flutter đã vượt lên trên React Native về số lượt star trên
Tính đến tháng 9/2019, Flutter đã ghi nhận 111k sao trên GitHub, tăng đáng kể so với 92k sao trước đó, cho thấy sự nổi bật ngày càng gia tăng của nó Ngoài ra, Flutter cũng vượt qua số lượt tìm kiếm trên Google, theo số liệu từ Google Trend, điều này càng khẳng định độ phổ biến của nền tảng này trong cộng đồng lập trình viên.
ỨNG DỤNG ĐẶT TOUR DU LỊCH
Phát biểu về bài toán
1.1.Giới thiệu về đề tài Ứng dụng đặt tour du lịch trực tuyến của nhóm em có hàng loạt thông tin tour du lịch trọn gói, địa điểm du lịch, sự kiện du lịch, bài viết du lịch trong nước và du lịch nước ngoài với đa dạng hình ảnh, bình luận và đánh giá để người dùng tham khảo
Các tour du lịch trọn gói được phân loại theo điểm đến với hình ảnh rõ nét và giao diện đơn giản, dễ nhìn, giúp người dùng dễ dàng lựa chọn tour phù hợp Ứng dụng còn là nơi giao lưu và chia sẻ trải nghiệm giữa các thành viên yêu thích du lịch, cho phép chia sẻ và xem các mẹo cũng như kinh nghiệm du lịch từ cộng đồng người dùng.
Hãy tải ngay và tận hưởng các tiện ích du lịch tuyệt vời từ sản phẩm của chúng tôi
1.2.Lý do chọn đề tài
Ngày nay, mọi người có thể dễ dàng tìm kiếm tour du lịch phù hợp cho bản thân và người thân chỉ với một thiết bị di động kết nối internet Chúng tôi mong muốn phát triển một ứng dụng du lịch, cung cấp thông tin chi tiết về các tour đa dạng và phong phú, bao gồm điểm đến trong nước và quốc tế, ngày khởi hành, lịch trình và chi phí.
Nếu ai cảm thấy mất thời gian, quá rắc rối khi tìm kiếm thông tin trên internet và đăng ký tour tại các công ty du lịch?
Với ứng dụng đặt tour của chúng tôi, bạn chỉ cần thực hiện vài thao tác đơn giản trên điện thoại di động để tìm hiểu thông tin và đăng ký tour du lịch yêu thích của mình.
Khi du lịch, việc liên tục mang theo tờ chương trình để theo dõi lịch trình tham quan có thể gây phiền phức.
Chỉ cần mang theo chiếc di động đã cài đặt ứng dụng, bạn sẽ có ngay một hành trình tour thông minh, cung cấp đầy đủ thông tin cần thiết về điểm đến.
Chúng ta có thể ngay lập tức chia sẻ hình ảnh và cảm xúc của mình với tất cả thành viên trong cộng đồng thông qua các tính năng như like, share, bình luận và trả lời bình luận.
Cộng đồng sử dụng app lớn, quảng bá qua các kênh mạng xã hội như Facebook, Twitter, Instagram, …
Cạnh tranh trực tiếp với các ứng dụng du lịch hàng đầu Việt Nam như Viettravel, Klook,…
Việc vươn ra quốc tế không chỉ giúp quảng bá hình ảnh đất nước Việt Nam tươi đẹp mà còn tạo cơ hội cho du khách nước ngoài tiếp cận với những tour du lịch hấp dẫn Đồng thời, việc cải thiện trải nghiệm người dùng (UX) sẽ làm hài lòng cả khách hàng trong và ngoài nước, từ đó góp phần tạo ra nguồn tài sản quý giá, làm giàu cho đất nước.
Ứng dụng không chỉ đơn thuần là nền tảng đặt tour du lịch trực tuyến mà còn là mạng xã hội du lịch toàn diện, tích hợp thanh toán trực tuyến qua mọi ví điện tử và internet banking Trong tương lai, ứng dụng sẽ phát triển thêm các tính năng như hướng dẫn du lịch bằng giọng nói, cung cấp thông tin real-time và cho phép người dùng tham gia chương trình tích điểm, nhận ưu đãi về du lịch, ăn uống và dịch vụ.
Yêu cầu và thực nghiệm
2.1.Môi trường xây dựng, phát triển và cài đặt, sử dụng
2.1.1 Môi trường xây dựng và phát triển
- Môi trường lập trình: Android Studio, Simulator, MySql Workbench
- Công nghệ: o Di động: Flutter, Dart o Server: Spring Boot, deploy trên Heroku o Cơ sở dữ liệu: MySql o Rest API
2.1.2 Môi trường cài đặt và sử dụng
- Các thiết bị di động sử dụng hệ điều hành Android
Để cài đặt phần mềm, yêu cầu cấu hình máy bao gồm hệ điều hành Windows 7, Windows 8.1 hoặc Windows 10, dung lượng đĩa trống tối thiểu 400 MB (không tính dung lượng cho IDE), và cần có công cụ như Windows PowerShell và Git for Windows.
- Cài đặt Flutter SDK o Tải Flutter SDK: https://storage.googleapis.com/flutter_infra/releases/beta/windows/flutter_ windows_v0.10.2-beta.zip
Để thiết lập môi trường cho Flutter, sau khi giải nén, bạn cần vào Control Panel, tìm kiếm "System" và chọn "Edit the system environment variables" Tiếp theo, chọn "Environment Variables", tìm mục "System Variables", chọn "PATH" và nhấn "Edit" Trong cửa sổ "Edit System Variable", chọn "New" và dán đường dẫn tới thư mục Flutter đã giải nén Sau đó, tìm tập tin "flutter_console.bat" trong thư mục đó và khởi chạy, nhập lệnh "flutter doctor" và bấm "Y" để hoàn tất cài đặt Lưu ý rằng việc chấp nhận điều khoản SDK là rất quan trọng; nếu không chấp nhận, bạn sẽ gặp lỗi khi build ứng dụng Chúng tôi sử dụng Android Studio để thực hiện Flutter.
Các chức năng chính
Người dùng có thể dễ dàng đăng nhập vào hệ thống để truy cập các chức năng như bình luận, đăng bài viết và xem lịch sử đặt tour.
Giúp người dùng đăng ký tài khoản
Xem danh sách các tour du lịch
Xem thông tin chi tiết tour du lịch (giá, địa điểm, thời gian, lịch trình)
Tìm kiếm tour theo mong muốn của người dùng Đồ Án 2 : SE122.L11.PMCL – VN 10
3.6.Xem bài viết về du lịch
Người dùng xem các bài viết về du lịch, chia sẽ kinh nghiệm du lịch của mọi người
3.7.Đăng bài viết du lịch
Người dùng đã đăng nhập vào ứng dụng được phép đăng các bài viết về du lịch, chia sẽ kinh nghiệm đi du lịch của bản với mọi người
Người dùng đặt tour du lịch Người dùng có thể lựa chọn tour, số vé.
Danh sách các APIs
- Đăng nhập o Method POST : https://travelbooking4uit.herokuapp.com/api/public/auth/login
- Đăng ký o Method POST: https://travelbooking4uit.herokuapp.com/api/public/auth/create
- Tìm kiếm tour o Method POST: https://travelbooking4uit.herokuapp.com/api/public/tour/search
- Lấy danh sách tour: o Method GET: https://travelbooking4uit.herokuapp.com/api/public/tour/search
- Lấy chi tiết tour o Method GET: https://travelbooking4uit.herokuapp.com/api/public/tour/{id}
- Đặt tour: o Method POST: https://travelbooking4uit.herokuapp.com/api/public/order/create
- Lấy danh sách tour đã đặt: o Method GET: https://travelbooking4uit.herokuapp.com/api/user/tour/get-orders
- Lấy danh sách bài viết: o Method GET: https://travelbooking4uit.herokuapp.com/api/public/posts
- Đăng bài viết: o Method POST: https://travelbooking4uit.herokuapp.com/api/user/posts/create Đồ Án 2 : SE122.L11.PMCL – VN 11
Thiết kế dữ liệu
Đồ Án 2 : SE122.L11.PMCL – VN 12
Mô hình Usecase
6.1.Usecase tổng quát Đồ Án 2 : SE122.L11.PMCL – VN 13
6.2.1 Đăng nhập Đồ Án 2 : SE122.L11.PMCL – VN 14
6.2.2 Đăng xuất Đồ Án 2 : SE122.L11.PMCL – VN 15
6.2.3 Đặt tour Đồ Án 2 : SE122.L11.PMCL – VN 16
Mô tả Người dùng muốn sử dụng chức năng đăng nhập vào hệ thống Dòng sự kiện chính Người dùng chọn mở ứng dụng
Người dùng chọn mục tài khoản ở thanh menu phía dưới màn hình Người dùng ấn vào nút đăng nhập
Người dùng nhập vào tên tài khoản và mật khẩu Ấn nút “đăng nhập”
Dòng sự kiện phụ Không có Tiền điều kiện Không có Hậu điều kiện Ứng dụng chuyển sang màn hình chính
Người dùng muốn đăng ký thành viên và tạo tài khoản để truy cập vào các tính năng đặc biệt Để bắt đầu, họ chỉ cần mở ứng dụng.
Người dùng vuốt chọn mục tài khoản ở thanh menu phía dưới màn hình Đồ Án 2 : SE122.L11.PMCL – VN 17
Để đăng ký tài khoản, người dùng cần nhấn vào nút Đăng nhập, sau đó chọn dòng chữ Đăng ký bên dưới form đăng nhập Tiếp theo, người dùng điền đầy đủ thông tin cần thiết vào form đăng ký và cuối cùng nhấn nút đăng ký để hoàn tất quá trình.
Dòng sự kiện phụ Không có Tiền điều kiện Không có Hậu điều kiện Không có
Mô tả Người dùng quên mật khẩu và muốn đăng nhập vào hệ thống Dòng sự kiện chính Người dùng chọn mở ứng dụng
Người dùng vuốt chọn mục tài khoản ở thanh menu phía dưới màn hình
Người dùng nhấn vào nút Đăng nhập Người dùng ấn vào dòng chữ “Bạn quên mật khẩu ?” bên dưới form đăng nhập
Nhập email đã đăng ký với hệ thống Ấn “Gửi”
Vào email cá nhân đã đăng ký với hệ thống để xem mật khẩu Dòng sự kiện phụ Không có
Tiền điều kiện Không có Hậu điều kiện Không có
Mô tả Người dùng muốn đăng xuất khỏi tài khoản hoặc chuyển tài khoản Dòng sự kiện chính Người dùng chọn mở ứng dụng
Người dùng vuốt chọn mục tài khoản ở thanh menu phía dưới màn hình Ấn nút Đăng Xuất
Dòng sự kiện phụ Không có Tiền điều kiện Người dùng đã đăng nhập vào hệ thống Hậu điều kiện Không có
Mô tả Người dùng muốn sử dụng chức năng cập nhật giá vàng Dòng sự kiện chính 1 Người dùng chọn mở ứng dụng
2 Người dùng vuốt chọn mục Cộng đồng ở thanh menu phía dưới màn hình
3 Chọn vào thẻ “bạn đang nghĩ gì”
4 Nhập vào trường “Hãy viết gì đó”
5 Ấn nút chọn ảnh và chọn ảnh từ thiết bị
6 Ấn icon gửi hình tam giác nhọn Dòng sự kiện phụ Không có
Tiền điều kiện Người dùng đã đăng nhập vào hệ thống Đồ Án 2 : SE122.L11.PMCL – VN 18
Hậu điều kiện Chuyển sang trang cộng đồng và load lại bài viết
Mô tả Người dùng muốn sử dụng chức năng cập nhật giá vàng Dòng sự kiện chính 1 Người dùng chọn mở ứng dụng
2 Người dùng vuốt chọn mục Cộng đồng ở thanh menu phía dưới màn hình
Dòng sự kiện phụ Không có Tiền điều kiện Người dùng đã đăng nhập vào hệ thống Hậu điều kiện Hiển thị những bài viết đã được đăng
Mô tả Người dùng muốn đặt tour được chọn sau khi tham khảo tour Dòng sự kiện chính 1 Người dùng chọn mở ứng dụng
2 Người dùng vuốt chọn mục Yêu thích ở thanh menu phía dưới màn hình
4 Xem chi tiết tour và ấn Đặt Ngay
5 Điền đầy đủ thông tin vào form
6 Ấn Đặt Tour Dòng sự kiện phụ Không có
Tiền điều kiện Không có Hậu điều kiện Không có
Mô tả Người dùng muốn tham khảo một số tour đang khai thác Dòng sự kiện chính 1 Người dùng chọn mở ứng dụng
2 Người dùng vuốt chọn mục Yêu thích ở thanh menu phía dưới màn hình
Dòng sự kiện phụ Không có Tiền điều kiện Không có Hậu điều kiện Hiển thị những tour đang được khai thác
Mô tả Người dùng muốn tìm kiếm tour phù hợp với chuyến đi của mình Dòng sự kiện chính 1 Người dùng chọn mở ứng dụng
2 Ấn vào thanh tìm kiếm ở trên cùng màn hình
3 Nhập địa điểm đến hoặc chọn các chip có sẵn
4 Ấn icon kính lúp để tìm kiếm Dòng sự kiện phụ Không có
Tiền điều kiện Không có Đồ Án 2 : SE122.L11.PMCL – VN 19
Hậu điều kiện Hiển thị những tour có điểm đến liên quan đến từ khóa người dùng nhập
Người dùng có nhu cầu xem thông tin chi tiết về mô tả tour, lịch trình và hình ảnh tham khảo Để bắt đầu, người dùng chỉ cần mở ứng dụng.
Người dùng vuốt chọn mục Yêu thích ở thanh menu phía dưới màn hình
Chọn tour cần xem Dòng sự kiện phụ Chọn hình cần xem hoặc “ẩn đi, xem thêm” mô tả Tiền điều kiện Không có
Hậu điều kiện Không có
6.3.11 Xem lịch sử đặt tour
Mô tả Người dùng muốn xem lại lịch sử đặt tour của mình Dòng sự kiện chính 1 Người dùng chọn mở ứng dụng
2 Người dùng vuốt chọn mục tài khoản ở thanh menu phía dưới màn hình
3 Chọn trường “Lịch sử đặt tour”
Dòng sự kiện phụ Không có Tiền điều kiện Không có Hậu điều kiện Hiển thị lịch sử đặt tour của người dùng
Sơ đồ tuần tự
7.1 Xem lịch sử đặt tour Đồ Án 2 : SE122.L11.PMCL – VN 20
7.3 Tìm kiếm tour Đồ Án 2 : SE122.L11.PMCL – VN 21
7.5 Đặt tour Đồ Án 2 : SE122.L11.PMCL – VN 22
7.7 Đăng bài viết Đồ Án 2 : SE122.L11.PMCL – VN 23
7.9 Quên mật khẩu Đồ Án 2 : SE122.L11.PMCL – VN 24
7.11 Đăng ký Đồ Án 2 : SE122.L11.PMCL – VN 25
Sơ đồ hoạt động
8.1 Xem lịch sử đặt tour
8.3 Tìm kiếm tour Đồ Án 2 : SE122.L11.PMCL – VN 26
8.6 Xem bài viết Đồ Án 2 : SE122.L11.PMCL – VN 27
8.8 Đăng xuất Đồ Án 2 : SE122.L11.PMCL – VN 28
8.11 Đăng ký Đồ Án 2 : SE122.L11.PMCL – VN 29
Thiết kế màn hình chi tiết
STT Sự kiện Hành động
1 Nhấn vào TextField “Tài khoản” để nhập tên tài khoản
Cho phép người dùng nhập tài khoản và hiển thị
2 Nhấn vào TextField “Mật khẩu” nhập mật khẩu
Cho phép người dùng nhập mật khẩu và chỉ hiển thị các kí tự là dấu chấm đen trên màn hình
3 Nhấp vào “Quên mật khẩu” Chuyển qua giao diện màn hình quên mật khẩu
4 Nhấp vào “Đăng ký” Chuyển qua giao diện màn hình đăng ký tài khoản
5 Nhấp vào “ Đăng nhập” Đăng nhập tài khoản vào ứng dụng Đồ Án 2 : SE122.L11.PMCL – VN 30
STT Sự kiện Hành động
1 Nhấn vào TextField “Họ tên” để nhập họ tên Cho phép người dùng nhập họ tên
2 Nhấn vào TextField “Tài khoản” để nhập tài khoản
Cho phép người dùng nhập tên tài khoản
3 Nhấn vào TextField “Mật khẩu” để nhập mật khẩu
Cho phép người dùng nhập mật khẩu
4 Nhấn vào TextField “Nhập lại mật khẩu” để nhập lại mật khẩu
Cho phép người dùng nhập lại mật khẩu
5 Nhấp vào nút “Đăng ký” để đăng ký tài khoản
Cho phép người dùng đăng ký tài khoản Đồ Án 2 : SE122.L11.PMCL – VN 31
9.3.Màn hình danh sách tour
STT Sự kiện Hành động
1 Nhấn vào thanh tìm kiếm Cho phép người dùng tìm kiếm tour
2 Nhấn vào đặt ngay Chuyển giao diện sang màn hình chi tiết tour Đồ Án 2 : SE122.L11.PMCL – VN 32
9.4.Màn hình chi tiết tour
STT Sự kiện Hành động
1 Nhấn chọn các ảnh nhỏ Hiện thị ảnh đó
2 Nhấn vào yêu thích Cho phép người dùng thêm tour vào danh sách yêu thích
3 Nhấn vào “Đặt ngay” để đặt tour Chuyển đến màn hình đặt tour Đồ Án 2 : SE122.L11.PMCL – VN 33
9.5.Màn hình tìm kiếm tour
STT Sự kiện Hành động
1 Nhấn chọn các chips nhỏ để chọn nhanh các tùy chọn tìm kiếm
Chọn nội dung tìm kiếm
2 Nhấp vào icon “tìm kiếm” để tìm kiếm Thực hiện tìm kiếm, chuyển sang màn hình danh sách tour
3 Nhấn vào 1 tour để xem chi tiết tour Chuyển sang màn hình chi tiết tour Đồ Án 2 : SE122.L11.PMCL – VN 34
9.6.Màn hình xem bài viết du lịch
STT Sự kiện Hành động
1 Nhấn vào “TextField bạn đang nghĩ gì” để đăng bài viết
Chuyển sang màn hình đăng bài viêt Đồ Án 2 : SE122.L11.PMCL – VN 35
STT Sự kiện Hành động
1 Nhấn vào TextField “Họ tên” để nhập họ tên Cho người dùng nhập họ tên
2 Nhấn vào TextField “Email” để nhập email Cho người dùng nhập email
3 Nhấn vào TextField “Địa chỉ” để nhập địa chỉ
Cho người dùng nhập vào địa chỉ
4 Nhấn vào TextField “Số điện thoại” để nhập số điện thoại
Cho người dùng nhập vào số điện thoại
5 Nhấn vào TextField “Người lớn” để nhập vào số vé người lớn
Cho người dùng nhập vào số vé người lớn muốn đặt
6 Nhấn vào TextField “Trẻ em” để nhập vào số vé trẻ em
Cho người dùng nhập vào số vé trẻ em muốn đặt
7 Nhấn vào nút “Đặt ngay” để tiến hành đặt vé Cho người đùng đặt vé Đồ Án 2 : SE122.L11.PMCL – VN 36