Tìm hiểu FLUTTER và xây dựng ứng dụng hướng dẫn nấu ăn (báo cáo cuối kì đồ án 1)

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TRẦN ANH TUẤN-19522481 VÕ ĐÔNG PHONG-19522015 BÁO CÁO ĐỒ ÁN TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG HƯỚNG DẪN NẤU ĂN KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TRẦN ANH TUẤN - 19522481 VÕ ĐÔNG PHONG - 19522015 BÁO CÁO ĐỒ ÁN TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG HƯỚNG DẪN NẤU ĂN KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS HUỲNH HỒ THỊ MỘNG TRINH TP HỒ CHÍ MINH, 2022 LỜI CẢM ƠN Sau q trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM, nhóm em trang bị kiến thức bản, kỹ thực tế để hồn thành Đồ án Để hồn thành Đồ án này, nhóm em xin gửi lời cảm ơn chân thành đến: Đầu tiên, nhóm em xin chân thành cảm ơn bày tỏ lòng biết ơn sâu sắc đến ThS Huỳnh Hồ Thị Mộng Trinh, cảm ơn tận tình bảo, hướng dẫn, truyền đạt kinh nghiệm, kiến thức chuyên môn tài liệu liên quan để nhóm hồn đề tài tốt Nhóm xin gửi đến lời tri ân điều mà cô dành cho nhóm Nhóm xin chân thành cảm ơn tồn thể q thầy khoa Cơng Nghệ Phần Mềm tồn thể q thầy Trường Đại Học Công Nghệ Thông Tin TP.HCM Quý thầy cô ln tận tình truyền đạt kiến thức, kinh nghiệm quý báu tạo điều kiện thuận lợi cho nhóm suốt q trình học tập trường đặc biệt suốt trình thực đồ án NHẬN XÉT CỦA GIÁO VIÊN MỤC LỤC CHƯƠNG TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Các ứng dụng tương tự 1.2.1 Ứng dụng Sách nấu ăn 1.2.2 Ứng dụng Cookpad 1.2.3 Ứng dụng Cooky 1.3 Mục tiêu đề tài 1.4 Đối tượng nghiên cứu 1.5 Phạm vi nghiên cứu CHƯƠNG TÌM HIỂU CÔNG NGHỆ 2.1 Lịch sử 2.2 Tổng quan 2.2.1 Ngôn ngữ Dart 2.2.2 Complier: AOT JIT 2.2.3 Cấu trúc 2.3 Ưu, nhược điểm 2.3.1 Ưu điểm 2.3.2 Nhược điểm 2.4 Khi nên sử dụng Flutter 10 2.5 So sánh Flutter React Native 10 CHƯƠNG PHÂN TÍCH THIẾT KẾ ỨNG DỤNG 12 3.1 Phân tích 12 3.1.1 Danh sách yêu cầu hệ thống 12 3.1.1 Đặc tả Usecase 14 3.2 Thiết kế 24 3.2.1 Thiết kế sở liệu 24 3.2.2 Thiết kế giao diện 30 3.2.2.1 Màn hình khởi động ứng dụng 31 3.2.2.2 Màn hình đăng nhập 32 3.2.2.3 Màn hình trang chủ 33 3.2.2.4 Màn hình chi tiết cơng thức nấu ăn 34 3.2.2.5 Màn hình bình luận đăng 35 3.2.2.6 Màn hình trang bếp người dùng khác 36 3.2.2.7 Màn hình tìm kiếm công thức nấu ăn 37 3.2.2.8 Màn hình đăng cơng thức 38 3.2.2.9 Màn hình trang bếp cá nhân 40 CHƯƠNG KẾT LUẬN 43 4.1 Kết đạt 43 4.2 Ưu điểm, hạn chế 43 4.2.1 Ưu điểm 43 4.2.2 Nhược điểm 43 4.3 Hướng phát triển 43 MỤC LỤC HÌNH ẢNH Hình Ứng dụng Sách nấu ăn Hình Ứng dụng Cookpad Hình Ứng dụng Cooky Hình Logo Flutter Hình Cấu trúc Flutter Hình Sơ đồ Usecase 14 Hình Sơ đồ Logic 25 Hình Màn hình khởi động ứng dụng 31 Hình Màn hình đăng nhập 32 Hình 10 Màn hình trang chủ 33 Hình 11 Màn hình chi tiết cơng thức nấu ăn 34 Hình 12 Màn hình bình luận đăng 35 Hình 13 Màn hình trang bếp người khác 36 Hình 14 Màn hình tìm kiếm cơng thức nấu ăn 37 Hình 15 hình đăng cơng thức nấu ăn 38 Hình 16 Màn hình trang bếp cá nhân 40 Hình 17 Sơ đồ kiến trúc hệ thống 42 MỤC LỤC BẢNG Bảng Bảng so sánh Flutter với React Native 11 Bảng Danh sách yêu cầu nghiệp vụ 12 Bảng Danh sách actors 14 Bảng Danh sách Use-case 14 Bảng Đặc tả chức đăng nhập google 15 Bảng Đặc tả chức xem công thức nấu ăn 16 Bảng Đặc tả chức lưu ăn 16 Bảng Đặc tả chức tìm kiếm cơng thức nấu ăn 17 Bảng Đặc tả chức like đăng 18 Bảng 10 Đặc tả chức bình luận đăng 19 Bảng 11 Đặc tả chức xem thông tin trang bếp người khác 19 Bảng 12 Đặc tả chức kết bạn bếp 20 Bảng 13 Đặc tả chức quản lý công thức nấu ăn 20 Bảng 14 Đặc tả chức quản lý trang bếp cá nhân 21 Bảng 15 Đặc tả chức đăng xuất 23 Bảng 16 Danh sách bảng sơ đồ Logic 25 Bảng 17 Danh sách trường bảng USER 26 Bảng 18 Danh sách trường bảng FOOD 27 Bảng 19 Danh sách trường COMMENT 27 Bảng 20 Danh sách trường INGREDIENT 28 Bảng 21 Danh sách trường METHOD 28 Bảng 22 Danh sách trường METHOD_IMAGE 28 Bảng 23 Danh sách trường SAVEFOOD 29 Bảng 24 Danh sách trường bảng FOLLOWING 29 Bảng 25 Danh sách trường bảng LIKE 29 Bảng 26 Danh sách hình 30 Bảng 27 Bảng thành phần hình đăng nhập 32 Bảng 28 Bảng thành phần hình trang chủ 33 Bảng 29 Bảng thành phần hình chi tiết cơng thức nấu ăn 34 Bảng 30 Bảng thành phần hình bình luận đăng 35 Bảng 31 Bảng thành phần hình trang bếp người dùng khác 36 Bảng 32 Bảng thành phần hình tìm kiếm cơng thức nấu ăn 37 Bảng 33 Bảng thành phần hình đăng cơng thức nấu ăn 38 Bảng 34 Bảng thành phần hình trang bếp cá nhân 40 CHƯƠNG TỔNG QUAN 1.1 Lý chọn đề tài Bếp núc dường chuyện xa xỉ người suốt ngày bận rộn với guồng quay công việc, bận rộn khiến họ cảm thấy mệt mỏi lười biếng phải đối mặt với bếp nhà Với cảm nhận em, việc suy nghĩ hôm nên ăn gì, mua gì, nấu dường chuyện vô nặng nhọc, nghĩ không muốn nghĩ chút Theo cách ghi chép thơng thường, người nội trợ gặp khó khăn ghi chép công thức giấy quên, sổ ghi,… Việc lưu trữ tìm kiếm trang công thức thời gian Tuy nhiên, việc ăn ngồi ngày có nhiều bất cập, an tồn vệ sinh thực phẩm ln khơng bảo đảm, giá ăn đắt so với thực tế cộng với thái độ cung cách phục vụ nhân viên chưa ổn định Với thời đại công nghệ 4.0 nay, việc vào bếp nấu nướng trở nên dễ dàng Chỉ cần có Internet, truy cập vào trang Web nấu nướng tải ứng dụng dạy nấu ăn điện thoại, bước đương nhiên cần làm theo hướng dẫn sẵn có Để tiếp cận đến nhiều người dùng, nhà phát triển ứng dụng mong muốn ứng dụng hướng dẫn nấu ăn họ chạy nhiều tảng đặc biệt Android, iOS, Windows, MacOS web Thay phải tìm hiểu nhiều ngơn ngữ, công nghệ khác ứng với tảng thị trường có nhiều cơng cụ hỗ trợ lập trình đa tảng Flutter, React Native, Ionic,… giúp nhà phát triển ứng dụng tiết kiệm thời gian, chi phí dành cho q trình phát triển ứng dụng Trong số có Flutter cơng cụ đời muộn có tốc độ phát triển vượt trội nhiều ưu điểm so với công nghệ trước, nhiều công ty công nghệ lớn sử dụng Flutter để phát triển sản phẩm Google, Alibaba, Tencent… Flutter phổ biến nhờ vào tính hot reload feature cho phép nhà phát triển nhà thiết kế trải nghiệm thay đổi Điều giúp phát triển nhanh Không giống React Native, Flutter hỗ trợ thiết kế giao diện người dùng dựa widget cung cấp phát triển nhanh chóng ứng dụng đa tảng Dựa sở nhu cầu thực tế đó, nhóm em định tìm hiểu Flutter sử dụng framework để xây dựng ứng dụng hướng dẫn nấu ăn 1.2 Các ứng dụng tương tự 1.2.1 Ứng dụng Sách nấu ăn Sách nấu ăn ứng dụng nấu ăn với sưu tập có 13900 cơng thức chế biến ngon cập nhật liên tục Ngồi việc hướng dẫn cơng thức nấu, ứng dụng cịn hướng dẫn mẹo vặt hay để việc nấu ăn trở nên dễ dàng Ưu điểm: • Nhiều cơng thức ngon cập nhật liên tục • Hướng dẫn nấu chi tiết, đơn giản, dễ hình dung • Mẹo vặt nấu ăn cho ngon thêm hồn hảo • Lưu chia sẻ viết với người Nhược điểm: • Khơng cho phép tạo cơng thức nấu ăn riêng người dùng • Khơng cho phép tạo cộng động ứng dụng • Chỉ có chủ ứng dụng thêm, bớt cơng thức • UI/UX ứng dụng tệ Hình Ứng dụng Sách nấu ăn 1.2.2 Ứng dụng Cookpad Cookpad cung cấp cho bạn hàng ngàn công thức nấu ăn ngon, đơn giản dễ 3.2.2 Thiết kế giao diện Bảng 26 Danh sách hình Ý nghĩa/Ghi STT Tên hình Màn hình khởi động ứng dụng Khởi động ứng dụng Màn hình đăng nhập Đăng nhập tài khoản google vào ứng dụng Màn hình trang chủ Hiển thị, cập nhật thông tin công thức nấu ăn Màn hình chi tiết cơng thức nấu Hiển thị chi tiết thông tin công thức nấu ăn ăn Màn hình bình luận Nhắn tin với chủ sở hữu ăn Màn hình trang bếp người khác Màn hình tìm kiếm cơng thức nấu ăn Hiển thị, xem trang bếp người dùng khác Màn hình đăng công thức nấu ăn Nhập thông tin công thức nấu ăn chia sẻ lên ứng dụng Màn hình trang bếp cá nhân Hiển thị, xem lưu, tơi, bạn bè Tìm kiếm cơng thức nấu ăn 30 3.2.2.1 Màn hình khởi động ứng dụng Hình Màn hình khởi động ứng dụng 31 3.2.2.2 Màn hình đăng nhập Hình Màn hình đăng nhập Bảng 27 Bảng thành phần hình đăng nhập STT Tên thành phần Đăng nhập Google Loại Chức Đăng nhập vào ứng dụng tài khoản google Button 32 3.2.2.3 Màn hình trang chủ Hình 10 Màn hình trang chủ Bảng 28 Bảng thành phần hình trang chủ STT Tên thành phần Loại Avatar CircleAvatar Biểu tượng Lưu (màu xanh cây) Button Biểu tượng Like (màu xanh da trời) Button Chức Ảnh đại diện người dùng Lưu cơng thức nấu ăn u thích đăng 33 Thêm bình luận 3.2.2.4 Chuyển đến hình bình luận TextField Màn hình chi tiết cơng thức nấu ăn Hình 11 Màn hình chi tiết cơng thức nấu ăn Bảng 29 Bảng thành phần hình chi tiết cơng thức nấu ăn STT Tên thành phần Loại Chức Image DecoratedBox Ảnh ăn Informations Container Hiển thị tên, xuất xứ, thời gian nấu, phần ăn chủ sở hữu Nguyên liệu Container Các nguyên liệu cần chuẩn bị cho ăn Cách làm Container Chi tiết bước chế biến 34 Màn hình bình luận đăng 3.2.2.5 Hình 12 Màn hình bình luận đăng Bảng 30 Bảng thành phần hình bình luận đăng STT Tên thành phần Loại Chức Avatar CircleAvatar Ảnh đại diện người dùng timeCreated DateTime Thời gian gửi tin nhắn Message TextField Nhập tin nhắn Biểu tượng Gửi Button Gửi tin nhắn 35 3.2.2.6 Màn hình trang bếp người dùng khác Hình 13 Màn hình trang bếp người khác Bảng 31 Bảng thành phần hình trang bếp người dùng khác STT Tên thành phần Loại Chức Avatar CircleAvatar Ảnh đại diện người dùng Name Text Tên người dùng Theo dõi Button Theo dõi hủy theo dõi người SearchInput TextField Nhập thơng tin tìm kiếm ăn ListRecipe ListView Hiển thị ăn người Back Button Quay trở lại hình trang chủ 36 3.2.2.7 Màn hình tìm kiếm cơng thức nấu ăn Hình 14 Màn hình tìm kiếm cơng thức nấu ăn Bảng 32 Bảng thành phần hình tìm kiếm công thức nấu ăn STT Tên thành phần Loại Chức Nhập thơng tin tìm kiếm ăn SearchInput TextField Món bạn xem ListView Hiển thị danh sách bạn xem Món gợi ý ListView Tìm kiếm theo loại thức ăn 37 3.2.2.8 Màn hình đăng cơng thức Hình 15 hình đăng công thức nấu ăn Bảng 33 Bảng thành phần hình đăng cơng thức nấu ăn STT Tên thành phần Loại Chức Thêm Button Chia sẻ cơng thức nấu ăn lên ứng dụng Camera InkWell Chọn hình ảnh cho ăn Tên ăn TextField Nhập tên ăn Miêu tả ăn TextField Nhập miêu tả ăn Khẩu phần TextField Nhập phần ăn Thời gian nấu TextField Nhập thời gian nấu 38 Nguyên liệu TextField Nhập nguyên liệu ăn Thêm nguyên liệu/ Xóa nguyên liệu Button Thêm/ xóa textfield nguyên liệu Cách làm TextField Nhập bước làm ăn 10 Camera InkWell Chọn ảnh minh họa cho bước làm 11 Thêm bước Button Thêm bước làm 12 Back Button Quay trở lại hình bếp cá nhân 39 Màn hình trang bếp cá nhân 3.2.2.9 Hình 16 Màn hình trang bếp cá nhân Bảng 34 Bảng thành phần hình trang bếp cá nhân STT Tên thành phần Loại Chức Avatar CircleAvatar Ảnh đại diện người dùng Name Text Tên người dùng Món Button Chuyển đến hình đăng công thức nấu ăn Dấu ba chấm Button Chọn đăng xuất để khỏi ứng dụng Món lưu Tab Chuyển đến tab lưu Món tơi Tab Chuyển đến tab tơi 40 Đang theo dõi Tab Chuyển đến tab theo dõi SearchInput TextField Nhập thơng tin tìm kiếm ăn ListRecipes ListView Danh sách lưu, tơi 41 3.2.3 Thiết kết kiến trúc Hình 17 Sơ đồ kiến trúc hệ thống 42 CHƯƠNG KẾT LUẬN 4.1 Kết đạt Tìm hiểu vận dụng kiến thức tìm hiểu Flutter, Dart, Firebase, để xây dựng ứng dụng di động Sinh viên có kỹ viết kỹ trình bày xây dựng tài liệu hồn chỉnh cho dự án trình bày trước hội đồng kết đạt Sinh viên biết cách làm việc hiệu phối hợp với làm việc nhóm Link github: https://github.com/AnhTuan2k1/Cooking 4.2 Ưu điểm, hạn chế 4.2.1 Ưu điểm - Có đầy đủ chức mà ứng dụng hướng nấu ăn cần có - Giao diện thân thiện với người dùng - Với FireStore real-time database dạng JSON, lưu trữ ảnh - Sử dụng hệ thống back-end Firebase với nhiều API sẵn có Google - Ln ln cập nhật liệu có thay đổi từ database 4.2.2 Hạn chế Vì quỹ thời gian gặp số khó khăn việc làm đề tài, nên ứng dụng cịn nhiều chức thiếu sót cịn nhiều hạn chế: - Chưa có chức đăng nhập, đăng ký tài khoản email - Chưa có tích hợp chức nhận thơng báo - Chưa có chức admin để quản lý công thức nấu ăn, người dùng - Một số chức chưa hoàn thiện - Chức tìm kiếm cịn hạn chế, thơng tin tìm kiếm bó hẹp tìm kiếm theo tên ăn 4.3 Giao diện thiết kế đơn giản, không bắt mắt Hướng phát triển - Phát triển thêm tính hỗ trợ dart mode light mode - Có thể thay đổi tùy chọn ngôn ngữ Tiếng Anh Tiếng Việt - Thêm chức đánh giá công thức nấu ăn cho người dùng - Phát triển chức thêm video hỗ trợ bước nấu ăn 43 - Phát triển hệ thống phân quyền (Admin, người dùng, khách,…) - Thêm chức đăng nhập, đăng ký xác thực email - Phát triển thêm chức so sánh công thức nấu ăn - Thêm chức chỉnh sửa công thức nấu ăn - Phát triển chức chia sẻ ứng dụng khác - Thêm chức quản lý thơng tin tài khoản - Phát triển tính tìm kiếm ăn theo tên ngun liệu, xuất xứ, - Thêm chức xếp hạng ăn TÀI LIỆU THAM KHẢO [1] Hỗ trợ sử dụng thư viện Flutter: https://pub.dev/ [2] Hỗ trợ sử dụng Firebase: https://firebase.flutter.dev/ [3] Tìm kiếm hỗ trợ sửa lỗi: https://stackoverflow.com/ 44 ... dựng ứng dụng hướng dẫn nấu ăn 1.2 Các ứng dụng tương tự 1.2.1 Ứng dụng Sách nấu ăn Sách nấu ăn ứng dụng nấu ăn với sưu tập có 13900 cơng thức chế biến ngon cập nhật liên tục Ngồi việc hướng dẫn. .. đam mê nấu nướng, có nhu cầu tìm kiếm cơng thức nấu ăn tảng ứng dụng di động 1.5 Phạm vi nghiên cứu - Xây dựng ứng dụng di động Flutter, service xây dựng ngôn ngữ Dart - Xây dựng ứng dụng hướng. .. - 19522481 VÕ ĐÔNG PHONG - 19522015 BÁO CÁO ĐỒ ÁN TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG HƯỚNG DẪN NẤU ĂN KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS HUỲNH HỒ THỊ MỘNG TRINH TP HỒ CHÍ