Tìm hiểu flutter và xây dựng ứng dụng đặt tour du lịch trực tuyến

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO CUỐI KỲ: MÔN :ĐỒ ÁN Đề tài: Tìm hiểu Flutter xây dựng ứng dụng đặt tour du lịch trực tuyến Giảng viên hướng dẫn: ThS Huỳnh Nguyễn Khắc Huy Sinh viên thực hiện: Nguyễn Trọng Khanh MSSV: 17520627 Lý Đạo Nam MSSV: 17520777 TP Hồ Chí Minh, Tháng 1, Năm 2021 NHẬN XÉT CỦA GIẢNG VIÊN ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… Lời cảm ơn Lời đầu tiên, nhóm chúng em xin bày tỏ lịng biết ơn sâu sắc đến thầy Huỳnh Nguyễn Khắc Huy – Giảng viên hướng dẫn môn Đồ án lớp SE122.L11.PMCL, người đồng hành tận tình hướng dẫn cho nhóm qua buổi thảo luận Chính nhờ giúp đỡ hết lịng thầy mà nhóm chúng em hồn thiện được đồ án cách suôn sẻ Mặc dù kiến thức nhóm chúng em cịn hạn hẹp nên khơng thể tránh khỏi thiếu sót nhóm chúng em cố gắng hoàn thiện đồ án thời hạn, hạn chế mắc lỗi Vì vậy, thành viên nhóm ln mong đợi nhận ý kiến đóng góp quý báu từ thầy qua lắng nghe, tiếp thu để rút kinh nghiệm, tự sửa chữa, hồn thiện thân tinh thần nghiêm túc, tự giác học hỏi Bên cạnh đó, xin gửi lời cảm ơn đến tất đóng góp thành viên nhóm, người nổ lực tìm kiếm tài liệu đưa ý tưởng để hoàn thành đồ án cách tốt Mong sau hoàn thành đồ án nhóm cải thiện phần kĩ học tập, kĩ làm việc nhóm thân Trong q trình làm đề tài báo cáo, khơng tránh khỏi nhiều điều thiếu sót, mong nhận phản hồi từ thầy bạn để góp phần làm cho báo cáo thêm hoàn thiện Chân thành cảm ơn ! MỤC LỤC THÔNG TIN CHUNG: I CÔNG NGHÊ FLUTTER: 1 Tìm hiểu cơng nghệ Flutter Kiến trúc Flutter 3 Kết luận II ỨNG DỤNG ĐẶT TOUR DU LỊCH Phát biểu toán Yêu cầu thực nghiệm Các chức 3.1 Đăng nhập 3.2 Đăng ký 3.3 Xem danh sách tour 3.4 Xem chi tiết tour 3.5 Tìm kiếm tour 3.6 Xem viết du lịch 10 3.7 Đăng viết du lịch 10 3.8 Đặt tour 10 Danh sách APIs 10 Thiết kế liệu 11 Mô hình Usecase 12 6.1 Usecase tổng quát 12 6.2 Usecase phân rã 13 6.3 Đặc tả Usecase 16 Sơ đồ 19 7.1 Xem lịch sử đặt tour 19 7.2 Xem chi tiết tour 20 7.3 Tìm kiếm tour 20 7.4 Xem danh sách tour 21 7.5 Đặt tour 21 7.6 Xem viết 22 7.7 Đăng viết 22 7.8 Đăng xuất 23 7.9 Quên mật 23 7.10 Đăng nhập 24 7.11 Đăng ký 24 Sơ đồ hoạt động 25 8.1 Xem lịch sử đặt tour 25 8.2 Xem chi tiết tour 25 8.3 Tìm kiếm tour 25 8.4 Xem danh sách tour 26 8.5 Đặt tour 26 8.6 Xem viết 26 8.7 Đăng viết 27 8.8 Đăng xuất 27 8.9 Quên mật 28 8.10 Đăng nhập 28 8.11 Đăng ký 28 Thiết kế hình chi tiết 29 9.1 Màn hình đăng nhập 29 9.2 Màn hình đăng ký 30 9.3 Màn hình danh sách tour 31 9.4 Màn hình chi tiết tour 32 9.5 Màn hình tìm kiếm tour 33 9.6 Màn hình xem viết du lịch 34 9.7 Màn hình đặt tour 35 10 Kết luận 36 Đồ Án : SE122.L11.PMCL – VN THÔNG TIN CHUNG: Tên đề tài: Ứng dụng đặt tour du lịch trực tuyến Link: https://github.com/ntrongkhanh/travel-booking-flutter.git Thơng tin nhóm: STT MSSV Họ tên 17520627 Nguyễn Trọng Khanh 17520777 Lý Đạo Nam Điện thoại Email 0399529209 17520627@gm.uit.edu.vn 17520777@gm.uit.edu.vn Đánh giá công việc: Thái độ Đánh giá Nguyễn Trọng Khanh 80% Tốt Đạt Lý Đạo Nam Tốt Đạt Tên Mức độ hồn thành cơng việc 80% Đồ Án : SE122.L11.PMCL – VN I CÔNG NGHÊ FLUTTER: Tìm hiểu cơng nghệ Flutter a Flutter gì? Flutter mobile UI framework Google để tạo giao diện chất lượng cao iOS Android khoảng thời gian ngắn Flutter hoạt động với code sẵn có sử dụng lập trình viên, tổ chức Phiên Flutter gọi "Sky" chạy hệ điều hành Android Nó cơng bố hội nghị nhà phát triển Dart 2015, với dự định ban đầu để kết xuất ổn định mức 120 khung hình giây Trong phát biểu hội nghị Google Developer Days Thượng Hải, Google công bố phiên Flutter Release Preview 2, phiên lớn cuối trước Flutter 1.0 Vào ngày tháng 12 năm 2018, Flutter 1.0 phát hành kiện Flutter Live, phiên "ổn định" khung ứng dụng Flutter mobile UI framework Google để tạo giao diện chất lượng cao iOS Android khoảng thời gian ngắn Flutter hoạt động với code sẵn có sử dụng lập trình viên, tổ chức Flutter sử dụng ngôn ngữ DART Google phát triển flutter sử dụng để tạo ứng dụng native cho Google Flutter phát triển nhằm giải toán thường gặp mobile Fast Development Native Performance Nếu React Native đảm bảo Fast Development code native đảm bảo Native Performance Flutter làm điều Flutter hồn tồn miễn phí mã nguồn mở b Sự khác biệt Flutter công nghệ khác - Là SDK đa tảng, ứng dụng Flutter hoạt động iOS Android - Chúng chạy engine render Flutter (được viết C++) Flutter Framework (được viết Dart, ứng dụng Flutter) - Flutter thiết kế từ đầu để đạt tới tốc độ khung hình 60fps Trong khơng phải số gặp iOS, với Android, bạn cảm thấy khác biệt rõ rệt - Hỗ trợ Hot ReLoad tiện lợi, giảm thời gian debug từ dẫn đến hiệu cao thực  So sánh nhỏ Flutter React native Khả dùng lại code Flutter Flutter cho phép overwriting code Nếu bạn có kế hoạch cho việc sử dụng lại code Flutter tùy chọn tốt để tối ưu việc lựa sử dụng lại code React Native React Native cho phép bạn sử dụng lại code, điều lại bị giới hạn vài components Để định nghĩa style cho tảng React Native nhiều thời gian Đồ Án : SE122.L11.PMCL – VN Các thư viện Third Party Có nhiều third-party packages sử dụng ngày phát triển, chúng thực hữu dụng Độ phổ biến Với khoảng 111k Github stars, Flutter trở thành trends việc phát triển Như Google giới thiệu framework Nó chắn muốn trở thành tảng phổ biến lựa chọn developer Từ Flutter giới thiệu, có lượng lớn viết hướng dẫn đưa lên online, có nhiều tài ngun hữu ích để bắt đầu viết ứng dụng mobile app Cộng đồng phát triển Từ React Native trở lên phổ biến, có nhiều third-party packages phát triển sử dụng nhiều ứng dụng, chúng thêm bớt cách linh động ứng dụng bạn Với 92k Github stars, React Native có lượng developer sử dụng nhiều lượng developer sử dụng JavaScript dễ dàng để sử dụng với thư viện React React Native phổ biến từ lâu, có nhiều cộng đồng để hỗ trợ online Những kỹ lập trình viên có kinh nghiệm JavaScript chắn đưa giải pháp cho vấn đề trình phát triển bạn c Ưu điểm, Nhược điểm Ưu điểm: - Ngôn ngữ Dart: Dart - OOP, dài, người quen viết Java / C # hài lịng với Dart - Ít phải viết config tạo project theo cách thủ công, ngược lại với React Native - Chỉ cần tải Flutter từ git, chạy “flutter doctor”, cho bạn biết loại vấn đề bạn có hệ thống Sau đó, tạo project từ Android Studio IDE sau cài đặt Flutter Plug-in sơ start project Ngoài cịn có Hot-reload giống React-Native - Hỗ trợ tuyệt vời cho IDE (Android Studio, IDE IntelliJ, VSCode) - Trình điều hướng tích hợp sẵn Sau tạo ứng dụng Flutter, bạn thấy có Navigator xây dựng sẵn Bạn tạo route mà không cần kết nối thứ (khơng giống RN, nơi bạn cần kết nối package điều hướng gốc v.v); - Giải pháp quản lý liệu tạo sẵn, ví dụ Flutter "Mọi thứ có Widget" cho Có StatefulWidget đặc biệt, với giúp đỡ mà quản lý trạng thái widget thay đổi cách động Nhược điểm: Đồ Án : SE122.L11.PMCL – VN - Có rào cản lớn cho người học JS, đến từ RN Do thực tế Dart sử dụng với thừa kế, đa hình tất thứ OOP - Khơng có JSX mà tất quen làm RN Nhìn vào tệp Dart khơng có phân chia thành template, styling data, trở nên khó chịu - Styling nhược điểm Thực tế khơng có tách biệt thành Styles, templates controller, có vấn đề mơ tả thành phần cần mô tả styles lúc - Animation cịn khó khăn Mặc dù có animation tốt, khó tạo hiệu ứng động, không giống RN - Tối ưu hóa Trong Fluter, có thừa kế widget với điều kiện thay đổi (trạng thái) khơng thể thay đổi (không trạng thái) Trong React-Native quản lý vịng đời Ngồi ra, nhược điểm lớn thiếu công cụ để lưu trạng thái ứng dụng, vấn đề có thể, nhiên, giải cách hóa trạng thái d Mục đích sử dụng Flutter cho đồ án - Framework đại reactive: Dễ dàng tạo giao diện người dùng bạn với framework đại, reactive Flutter tập hợp platform, layout widget phong phú Giải thách thức giao diện người dùng khó khăn bạn với API mạnh mẽ linh hoạt cho 2D, animation, gesture, hiệu ứng - UI đẹp biểu cảm: Thỏa mãn người dùng bạn với widget built-in đẹp mắt Flutter theo Material Design Cupertino (iOS-flavor), API chuyển động phong phú, scroll tự nhiên mượt mà tự nhận thức tảng - Phát triển ứng dụng thống nhất: Flutter có công cụ thư viện để giúp bạn dễ dàng đưa ý tưởng vào sống iOS Android Nếu bạn chưa có kinh nghiệm phát triển thiết bị di động, Flutter cách dễ dàng nhanh chóng để xây dựng ứng dụng di động tuyệt đẹp - Flutter sở hữu doc (document) phải nói khơng bỏ sót thứ Đi từ cài đặt, hướng dẫn viết app CI/CD, debug, test profiling Bộ profiling Flutter hay dùng để đo đạc số performance chi tiết Kiến trúc Flutter Flutter thiết kế hệ thống nhiều lớp, mở rộng Nó tồn dạng loạt thư viện độc lập mà thư viện phụ thuộc vào lớp bên Không có lớp có quyền truy cập đặc biệt vào lớp bên dưới, phần framework level thiết kế để trở thành tùy chọn thay Đồ Án : SE122.L11.PMCL – VN a Embedder - Đối với hệ điều hành, ứng dụng Flutter đóng gói theo cách giống ứng dụng gốc khác Một platform-specific embedder cung cấp entrypoint, phối hợp với hệ điều hành để truy cập vào dịch vụ rendering surfaces, accessibility, input, quản lý message event loop - Embedder viết ngôn ngữ phù hợp với tảng: Java C++ cho Android, Objective- C/Objecttive-C++ cho iOS macOS, C++ cho Windows Linux - Khi sử dụng embedder, mã Flutter tích hợp vào ứng dụng có dạng module, tồn nội dung ứng dụng b Flutter Engine - Cốt lõi Flutter Flutter Engine, phần lớn viết C++, có nguyên tắc cần thiết để hỗ trợ tất ứng dụng Flutter - Engine có trách nhiệm chuyển đổi composited scenes frame cần thiết kế Nó cung cấp khả triển khai API cốt lõi Flutter bao gồm đồ họa (thông qua Skia), text layout, file network I/O, trợ năng, kiến trúc plugin Dart runtime – compile tool Đồ Án : SE122.L11.PMCL – VN 7.6 Xem viết 7.7 Đăng viết Đồ Án : SE122.L11.PMCL – VN 22 7.8 Đăng xuất 7.9 Quên mật Đồ Án : SE122.L11.PMCL – VN 23 7.10 Đăng nhập 7.11 Đăng ký Đồ Án : SE122.L11.PMCL – VN 24 Sơ đồ hoạt động 8.1 Xem lịch sử đặt tour 8.2 Xem chi tiết tour 8.3 Tìm kiếm tour Đồ Án : SE122.L11.PMCL – VN 25 8.4 Xem danh sách tour 8.5 Đặt tour 8.6 Xem viết Đồ Án : SE122.L11.PMCL – VN 26 8.7 Đăng viết 8.8 Đăng xuất Đồ Án : SE122.L11.PMCL – VN 27 8.9 Quên mật 8.10 Đăng nhập 8.11 Đăng ký Đồ Án : SE122.L11.PMCL – VN 28 Thiết kế hình chi tiết 9.1.Màn hình đăng nhập STT Sự kiện Nhấn vào TextField “Tài khoản” để nhập tên tài khoản Nhấn vào TextField “Mật khẩu” nhập mật Nhấp vào “Quên mật khẩu” Nhấp vào “Đăng ký” Nhấp vào “ Đăng nhập” Hành động Cho phép người dùng nhập tài khoản hiển thị Cho phép người dùng nhập mật hiển thị kí tự dấu chấm đen hình Chuyển qua giao diện hình quên mật Chuyển qua giao diện hình đăng ký tài khoản Đăng nhập tài khoản vào ứng dụng Đồ Án : SE122.L11.PMCL – VN 29 9.2.Màn hình đăng ký STT Sự kiện Nhấn vào TextField “Họ tên” để nhập họ tên Nhấn vào TextField “Tài khoản” để nhập tài khoản Nhấn vào TextField “Mật khẩu” để nhập mật Nhấn vào TextField “Nhập lại mật khẩu” để nhập lại mật Nhấp vào nút “Đăng ký” để đăng ký tài khoản Hành động Cho phép người dùng nhập họ tên Cho phép người dùng nhập tên tài khoản Cho phép người dùng nhập mật Cho phép người dùng nhập lại mật Cho phép người dùng đăng ký tài khoản Đồ Án : SE122.L11.PMCL – VN 30 9.3.Màn hình danh sách tour STT Sự kiện Nhấn vào tìm kiếm Nhấn vào đặt Hành động Cho phép người dùng tìm kiếm tour Chuyển giao diện sang hình chi tiết tour Đồ Án : SE122.L11.PMCL – VN 31 9.4.Màn hình chi tiết tour STT Sự kiện Nhấn chọn ảnh nhỏ Nhấn vào yêu thích Nhấn vào “Đặt ngay” để đặt tour Hành động Hiện thị ảnh Cho phép người dùng thêm tour vào danh sách yêu thích Chuyển đến hình đặt tour Đồ Án : SE122.L11.PMCL – VN 32 9.5.Màn hình tìm kiếm tour STT Sự kiện Nhấn chọn chips nhỏ để chọn nhanh tùy chọn tìm kiếm Nhấp vào icon “tìm kiếm” để tìm kiếm Nhấn vào tour để xem chi tiết tour Hành động Chọn nội dung tìm kiếm Thực tìm kiếm, chuyển sang hình danh sách tour Chuyển sang hình chi tiết tour Đồ Án : SE122.L11.PMCL – VN 33 9.6.Màn hình xem viết du lịch STT Sự kiện Nhấn vào “TextField bạn nghĩ gì” để đăng viết Hành động Chuyển sang hình đăng viêt Đồ Án : SE122.L11.PMCL – VN 34 9.7.Màn hình đặt tour STT Sự kiện Nhấn vào TextField “Họ tên” để nhập họ tên Nhấn vào TextField “Email” để nhập email Nhấn vào TextField “Địa chỉ” để nhập địa Nhấn vào TextField “Số điện thoại” để nhập số điện thoại Nhấn vào TextField “Người lớn” để nhập vào số vé người lớn Nhấn vào TextField “Trẻ em” để nhập vào số vé trẻ em Nhấn vào nút “Đặt ngay” để tiến hành đặt vé Hành động Cho người dùng nhập họ tên Cho người dùng nhập email Cho người dùng nhập vào địa Cho người dùng nhập vào số điện thoại Cho người dùng nhập vào số vé người lớn muốn đặt Cho người dùng nhập vào số vé trẻ em muốn đặt Cho người đùng đặt vé Đồ Án : SE122.L11.PMCL – VN 35 10.Kết luận - - - Về chức năng: o Hoàn thành chức : xem danh sách tour, đặt tour, xem viết, xem lịch sử đặt tour, Về kỹ thuật: o Nhóm tìm hiểu sử dụng cơng nghệ Flutter xây dựng ứng dụng di động o Sử dụng kỹ thuật Rest API để lấy sử lý liệu o Tự xây dựng backend đơn giản, deploy lên Heroku để Rest API Mặt chưa hoàn thành: o Vẫn chưa hoàn thành chức đăng viết với hình ảnh o Chưa tích hợp cổng tốn điện tử (Momo, PayPal, ) vào hệ thống o UI – UX nhiểu khuyết điểm Đồ Án : SE122.L11.PMCL – VN 36 ... VN II ỨNG DỤNG ĐẶT TOUR DU LỊCH Phát biểu toán 1.1.Giới thiệu đề tài Ứng dụng đặt tour du lịch trực tuyến 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, kiện du lịch, ... sách tour, đặt tour, xem viết, xem lịch sử đặt tour, Về kỹ thuật: o Nhóm tìm hiểu sử dụng công nghệ Flutter xây dựng ứng dụng di động o Sử dụng kỹ thuật Rest API để lấy sử lý liệu o Tự xây dựng. .. cho đất nước Hướng phát triển: Trở thành ứng dụng không riêng đặt tour du lịch trực tuyến mà đáp ứng tiện ích du lịch mạng xã hội thức du lịch, tốn trực tuyến ví điện tử internet banking, phát