ĐẠ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 BÁO CÁO ĐỒ ÁN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG CHIA SẺ CÔNG THỨC NẤU ĂN GVHD: Ths Huỳnh Nguyễn Khắc Huy Sinh viên thực hiện: Nguyễn Minh Đức - 18520210 Phạm Quốc Đạt - 18520584 TP.Thủ Đức, tháng năm 2021 Copyright © 2020 by HOMIES team Báo cáo đồ án LỜI CẢM ƠN Lời đầu tiên, nhóm tác giả xin chân thành cảm ơn q thầy khoa Cơng nghệ Phần mềm, trường Đại Học Cơng Nghệ Thơng Tin, ĐHQG TP.HCM, tận tình hướng dẫn nhóm suốt thời gian qua Những kiến thức mà thầy cô truyền đạt tảng quan trọng để nhóm hồn thành đề tài Nhóm tác giả xin gửi lời cảm ơn chân thành lòng biết ơn sâu sắc đến ThS Huỳnh Nguyễn Khắc Huy, cảm ơn thầy tận tình hướng dẫn tạo điều kiện tốt cho nhóm hồn thành đề tài Những lời động viên, góp ý chân tình thầy động lực q báu để nhóm vượt qua khó khăn tìm hiểu thực đề tài Trong thời gian tháng thực đề tài, nhóm tác giả cố gắng vận dụng kiến thức tảng học, kết hợp học hỏi tìm hiểu cơng nghệ để ứng dụng xây dựng đề tài môn học Tuy nhiên trình thực hiện, kiến thức kinh nghiệm cịn nhiều hạn chế, khó tránh khỏi thiếu sót Chính vậy, nhóm tác giả mong nhận góp ý từ q thầy để nhóm hồn thiện thêm kiến thức mà nhóm học tập, làm hành trang q báu cho nhóm cơng việc sau Xin chân thành cảm ơn quí thầy ! Copyright © 2021 by HOMIES team Báo cáo đồ án NHẬN XÉT (Của giáo viên hướng dẫn) Copyright © 2021 by HOMIES team Báo cáo đồ án THƠNG TIN VỀ NHĨM STT MSSV Họ tên Điện thoại Email 18520210 Nguyễn Minh Đức 0908680223 18520210@gm.uit.edu.vn 18520584 Phạm Quốc Đạt 0352565635 18520584@gm.uit.edu.vn PHÂN CHIA CÔNG VIỆC Họ tên Công việc STT MSSV 18520210 Nguyễn Minh Đức BA, Back-end, Database 18520584 Phạm Quốc Đạt UI/UX Design, Front-end Bảng phân công công việc chi tiết nhóm trình bày file Kế hoạch.xlsx Copyright © 2021 by HOMIES team Báo cáo đồ án MỤC LỤC CHƯƠNG PHÁT BIỂU BÀI TOÁN 1.1 Phát biểu toán Nhu cầu thực tế Cơ hội phát triển 1.2 Khảo sát trạng phần mềm có Sách nấu ăn Cookpad Cooky CHƯƠNG YÊU CẦU CỦA HỆ THỐNG 2.1 Yêu cầu nghiệp vụ Danh sách yêu cầu Danh sách yêu cầu biểu mẫu 2.2 Yêu cầu hiệu 10 2.3 Yêu cầu tiện dụng .12 2.4 Bảng trách nhiệm cho yêu cầu 13 Yêu cầu nghiệp vụ 13 Yêu cầu tiến hóa .15 Yêu cầu hiệu 16 Yêu cầu tiện dụng .18 2.5 Yêu cầu phần cứng .19 Người dùng .19 Hệ thống máy chủ .19 CHƯƠNG MƠ HÌNH USECASE 20 3.1 Sơ đồ Use-case 20 Sơ đồ tổng quát 20 Sơ đồ Use-case dành cho Khách .21 Sơ đồ Use-case dành cho Người dùng 22 3.2 Danh sách Actor 22 3.3 Danh sách Use-case .23 3.4 Đặc tả Use-case 24 Đặc tả Use-case Đăng ký 24 Copyright © 2021 by HOMIES team Báo cáo đồ án Đặc tả Use-case Đăng nhập 24 Đặc tả Use-case Xem công thức nấu ăn 25 Đặc tả Use-case Tìm kiếm cơng thức nấu ăn 26 Đặc tả Use-case Quản lý công thức nấu ăn 27 Đặc tả Use-case Tạo thực đơn cho bữa ăn 28 Đặc tả Use-case Ghim công thức vào mục yêu thích .28 Đặc tả Use-case Xem ăn u thích 29 Đặc tả Use-case Quản lý thông tin cá nhân 30 Đặc tả Use-case Khám phá ăn 30 CHƯƠNG PHÂN TÍCH .32 4.1 Sơ đồ lớp (mức phân tích) 32 Sơ đồ lớp (mức phân tích) 32 Danh sách lớp đối tượng quan hệ 34 Mô tả chi tiết lớp đối tượng 35 4.2 Sơ đồ trạng thái 41 State Diagram cho Đăng ký 41 State Diagram cho Đăng nhập 42 State Diagram cho Đăng công thức nấu ăn 43 State Diagram cho Tạo thực đơn 44 State Diagram cho Cập nhật thông tin cá nhân 45 CHƯƠNG THIẾT KẾ DỮ LIỆU .46 5.1 Cơ sở liệu NoSQL 46 5.2 Mô tả chi tiết kiểu liệu sơ đồ logic 47 Collection recipe .47 Collection banner 47 Collection user 48 Collection category 48 CHƯƠNG THIẾT KẾ KIẾN TRÚC 49 6.1 Kiến trúc hệ thống 49 6.2 Mô tả chi tiết thành phần hệ thống 50 Kiến trúc Flutter App 50 Domain Layer: Services 50 Copyright © 2021 by HOMIES team Báo cáo đồ án Presentation & Logic Layer: View Models 51 UI Layer: Widgets 51 CHƯƠNG THIẾT KẾ GIAO DIỆN 53 7.1 Danh sách hình .53 7.2 Mơ tả chi tiết hình .54 Màn hình khởi động ứng dụng 54 Màn hình giới thiệu 55 Màn hình chọn cách thức đăng nhập 56 Màn hình đăng nhập 57 Màn hình đăng ký tài khoản .58 Màn hình trang chủ 59 Màn hình cơng thức u thích 60 Màn hình thơng tin người dùng 61 Màn hình chỉnh sửa thông tin 63 Màn hình khám phá ăn 64 Màn hình thơng tin ứng dụng 65 Màn hình chi tiết cơng thức nấu ăn 66 Màn hình tìm kiếm cơng thức nấu ăn .67 Màn hình đăng cơng thức nấu ăn 68 Màn hình tạo thực đơn 69 Màn hình khơng có kết nối mạng 70 CHƯƠNG KẾT LUẬN 71 8.1 Môi trường phát triển Môi trường triển khai 71 Môi trường phát triển ứng dụng 71 Môi trường triển khai ứng dụng 71 8.2 Kết đạt 71 Kết 71 Điểm đặc sắc đề tài 72 Hướng phát triển .72 Copyright © 2021 by HOMIES team Báo cáo đồ án 1 CHƯƠNG PHÁT BIỂU BÀI TỐN 1.1 Phát biểu tốn Nhu cầu thực tế Theo cách nấu ăn thông thường, người nội trợ cần phải tốn nhiều công sức ghi chép cơng thức giấy, khó khăn việc thực bước theo trình tự công thức nấu ăn Việc tạo thực đơn ngày thủ cơng, tìm trang sách để xem cơng thức Đồng thời, khó khăn việc lưu trữ, ghi chép sổ dễ bị mất, rách, ướt q trình nấu ăn Mặt khác, cơng thức nấu ăn nhiều internet lại khó đánh giá cơng thức có ngon khơng, hay chí cơng thức câu view, chưa qua thử nghiệm Cơ hội phát triển Cách quản lý quy trình cũ thiếu hiệu quả, địi hỏi hệ thống cho phép thực việc nấu ăn đạt hiệu cao Từ tìm cơng thức ăn, xem nguyên liệu, tạo thực đơn, xem trình tự bước thực hiện,… sử dụng chung hệ thống đồng bộ, xuyên suốt không giúp tiết kiệm công sức thời gian mà cịn tăng hiệu quả, trình tự bước công thức Hệ thống tương lai đáp ứng nhu cầu người dùng thời đại số hoá 1.2 Khảo sát trạng phần mềm có Sách nấu ăn Copyright © 2021 by HOMIES team Báo cáo đồ án 1.2.1.1 Sơ lược Sách Nấu Ăn ứng dụng dạy 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 1.2.1.2 Ư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 hoàn hảo  Lưu chia sẻ viết với người 1.2.1.3 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ệ Copyright © 2021 by HOMIES team Báo cáo đồ án Cookpad 1.2.2.1 Sơ lược Sách Nấu Ăn ứng dụng dạy 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 hướng dẫn mẹo vặt hay để việc nấu ăn trở nên dễ dàng 1.2.2.2 Ư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 hoàn hảo  Lưu chia sẻ viết với người 1.2.2.3 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ệ Copyright © 2021 by HOMIES team Báo cáo đồ án 59 Màn hình trang chủ STT Kiểu Tên Chức năng/Biến cố Chào người dùng HelloUser Text FindRecipes InkWell SpecialRecipe CarouselSlider Categories ListView Các loại ăn Suggest StreamBuilder Các ăn khuyên dùng Trending StreamBuilder Xu hướng ăn Popular StreamBuilder Các ăn phổ biến Tìm kiếm cơng thức nấu ăn theo liệu nhập Slider hiển thị ăn đặc biệt ngày Copyright © 2021 by HOMIES team Ghi Báo cáo đồ án 60 Màn hình cơng thức u thích STT Tên Kiểu ListRecipe ListView DeleteRecipe InkWell Chức năng/Biến cố Ghi Hiển thị danh sách Các ăn u thích ăn u thích người dùng chọn Xóa ăn khỏi danh sách ăn u thích Copyright © 2021 by HOMIES team Báo cáo đồ án 61 Màn hình thơng tin người dùng STT Tên Avatar Kiểu Chức năng/Biến cố CircleAvatar Ảnh đại diện người dùng Name Text Tên người dùng Email Text Email người dùng MealPlan InkWell Tạo thực đơn AddRecipe InkWell Đăng công thức nấu ăn YourRecipes InkWell EditProfile InkWell Chỉnh sửa thông tin cá nhân CallCenter InkWell Gọi hỗ trợ Các công thức nấu ăn đăng Copyright © 2021 by HOMIES team Ghi Hiển thị ảnh mặc định khơng có ảnh đại diện Tạo thực đơn từ ăn u thích Báo cáo đồ án 62 AboutApps InkWell 10 Logout InkWell Thông tin tổng quan ứng dụng Đăng xuất khỏi tài khoản Copyright © 2021 by HOMIES team Báo cáo đồ án 63 Màn hình chỉnh sửa thông tin STT Tên Kiểu Avatar CircleAvatar Camera InkWell YourName TextFormField YourCountr y TextFormField YourAge TextFormField Update InkWell Chức năng/Biến cố Ghi Hiển thị ảnh đại diện Hiển thị ảnh mặc định người dùng khơng có ảnh Truy cập đến thư mục Yêu cầu cho phép truy hình ảnh cập ảnh Cập nhật tên người dùng Cập nhật Quốc gia người dùng Cập nhật tuổi người dùng Cập nhật thông tin Kiểm tra thông tin phù người dùng chỉnh sửa hợp Copyright © 2021 by HOMIES team Báo cáo đồ án 64 Màn hình khám phá ăn STT Tên Category Kiểu Chức năng/Biến cố Các loại ăn để TabBar người dùng chọn Hiển thị danh sách Camera TabBarView ăn theo loại người dùng chọn Copyright © 2021 by HOMIES team Ghi Báo cáo đồ án 65 Màn hình thơng tin ứng dụng STT Tên AboutApp Kiểu Text Chức năng/Biến cố Hiển thị thơng tin chung ứng dụng Copyright © 2021 by HOMIES team Ghi Báo cáo đồ án 66 Màn hình chi tiết cơng thức nấu ăn STT Tên Kiểu Image DecoratedBox InforRecipe MySliverAppBar Chức năng/Biến cố Ảnh ăn Hiển thị tên, rating loại ăn Các thơng tin Informations Container công thức(Tổng số bước, thời gian nấu, calo) Ingredients Container Directions Container Các nguyên liệu cần chuẩn bị cho ăn Chi tiết bước chế biến Copyright © 2021 by HOMIES team Ghi Báo cáo đồ án 67 Màn hình tìm kiếm công thức nấu ăn STT Tên Kiểu SearchInput InputDecoration Category ListView Chức năng/Biến cố Nhập thông tin cần tìm kiếm Tìm kiếm theo loại thức ăn Hiển thị ăn ListRecipe StreamBuilder Ghi theo thơng tin người dùng tìm kiếm Copyright © 2021 by HOMIES team Hiển thị người dùng nhập thông tin tìm kiếm chọn loại ăn Báo cáo đồ án 68 Màn hình đăng cơng thức nấu ăn STT Tên Kiểu Camera InkWell NameRecipe Chức năng/Biến cố Ghi Chọn hình ảnh cho Yêu cầu cho phép ăn truy cập ảnh InputDecoration Nhập tên ăn Bắt buộc nhập TimeCooking InputDecoration Nhập thời gian nấu Bắt buộc nhập Rating InputDecoration Nhập đánh giá ăn Bắt buộc nhập Category DropdownButton Chọn loại ăn Calorie InputDecoration Ingredients InputDecoration Nhập tổng calo ăn Nhập nguyên liệu cần chuẩn bị cho ăn Copyright © 2021 by HOMIES team Bắt buộc nhập Báo cáo đồ án 69 Direction InputDecoration Nhập bước thực nấu ăn Màn hình tạo thực đơn STT Kiểu Tên DayOfWeek Chức năng/Biến cố Ghi Các ngày tuần Text Chọn ăn từ danh Chỉ chọn AddRecipe InkWell sách ăn u thích để danh sách tạo thực đơn cho ngày Copyright © 2021 by HOMIES team ăn yêu thích Báo cáo đồ án 70 Màn hình khơng có kết nối mạng STT Tên Notification Kiểu Text Chức năng/Biến cố Hiển thị nội dung thơng báo Copyright © 2021 by HOMIES team Ghi Báo cáo đồ án 71 CHƯƠNG KẾT LUẬN 8.1 Môi trường phát triển Môi trường triển khai Môi trường phát triển ứng dụng ● Hệ điều hành: Windows 10 ● Hệ quản trị sở liệu: FireStore ● Cơng cụ dùng để phân tích, thiết kế: draw.io, Astah, AdobeXD ● Công cụ dung để xây dựng ứng dụng: Android Studio 4.x ● Công cụ quản lý dự án: Github, Messenger Group, Microsoft Teams ● Công cụ soạn thảo: Google Sheet, Excel, Word, Notepad ● Công cụ quản lý Database: Firebase Console ● Framework sử dụng: Flutter 2.x, rxdart, giffy_dialog, bloc Môi trường triển khai ứng dụng ● Hệ điều hành: Android API 21+, iOS 12+ (chưa kiểm duyệt) ● RAM: Trống 200MB ● CPU: Snapdragon 439 / MediaTek MT6762 (P22) trở lên ● Phần cứng: Chipset 64-bit ● Bộ nhớ: 200MB 8.2 Kết đạt Kết ● Biết cách phân tích thiết kế CSDL để giải yêu cầu thực tế ● Biết cách sử dụng Firebase ● Sinh viên tự xây dựng mục tiêu hoàn thành mục tiêu giai đoạn đề tài ● Sinh viên hiểu thực trọn vẹn quy trình từ phân tích, thiết kế, triển khai hệ thống sử dụng Firebase Flutter v2 để phát triển ứ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 hoà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 Copyright © 2021 by HOMIES team Báo cáo đồ án 72 ● Phát hành ứng dụng di động đề tài Google Play Store Điểm đặc sắc đề tài ● Sử dụng kiến trúc Bloc kết hợp với rxdart để quản lý State dễ dàng bảo trì phát triển ứng dụng ● Giao diện thân thiện với người dùng, animation bắt mắt ● Sử dụng hệ thống back-end Firebase với nhiều API sẵn có Google, phương thức xác thực bảo mật ● FireStorage lưu trữ ảnh ● Với FireStore real-time database dạng JSON ● Luôn cập nhật liệu có thay đổi từ database ● Sử dụng rxdart để quản lý State hiệu không block UI ● Sử dụng carousel_slider để kích thích thị giác người dùng tự động chuyển banner ● Hệ thống sử dụng liệu từ Youtube để hướng dẫn nấu ăn video Gordon Ramsay-Vua đầu bếp giới Hướng phát triển ● Phát triển thêm chức so sánh công thức nấu ăn ● Phát triển hệ thống phân quyền (Người dùng, kiểm duyệt viên, admin,…) ● Có thể thay đổi tùy chọn ngôn ngữ Tiếng Anh Tiếng Việt ● Thêm chức đánh giá bình luận công thức nấu ăn cho người dùng ● Hệ thống category hợp lý: phân chia ăn theo vùng miền, loại ăn ● Hệ thống badge: ví dụ công thức nấu chè cốm nhận nhiều vote nhận "chuyên gia nấu chè cốm", có nhiều cơng thức nấu chè nhận badge "chuyên gia nấu chè" ● Hệ thống point: xem cơng thức có đủ số point định mua Subcription Point kiếm xem quảng cáo mua ● Hiển thị q trình thực ăn ● Chia sẻ ăn đến cộng đồng ● Hướng dẫn chi tiết bước nấu ăn ● Tính theo dõi đầu bếp khác Copyright © 2021 by HOMIES team Báo cáo đồ án 73 Copyright © 2021 by HOMIES team ... Trả công Xem công thức nấu ăn Chọn xem công thức nấu ăn thức nấu ăn người dùng cần xem Cung cấp thơng Tìm kiếm theo Tìm kiếm cơng thức tin tên searchIndex tên ăn theo lọc ăn danh ăn mục ăn theo... Tên chức Xem cơng thức nấu ăn Primary Actor Người dùng Tóm tắt Người dùng xem công thức nấu ăn chia sẻ ứng dụng Mục đích Hệ thống cho phép người dùng xem công thức nấu ăn chia sẻ Secondary Actors... Use-case T Khách Đăng ký Đăng nhập Xem cơng thức nấu ăn Tìm kiếm cơng thức nấu ăn Đăng công thức nấu ăn Ý nghĩa/Ghi Người dùng Tạo thực đơn cho bữa ăn Ghim cơng thức vào mục u thích Xem ăn u thích Quản