TỔNG QUAN
Lý do chọn đề tài
Bếp núc trở thành nỗi ám ảnh đối với những người bận rộn với công việc hàng ngày, khiến họ cảm thấy mệt mỏi và chán nản khi về nhà Việc quyết định hôm nay nên ăn gì, mua gì và nấu như thế nào trở thành một gánh nặng khó chịu, khiến nhiều người không muốn suy nghĩ đến.
Nhiều người nội trợ thường gặp khó khăn trong việc ghi chép công thức nấu ăn do quên hoặc làm mất sổ ghi Việc lưu trữ và tìm kiếm từng trang công thức trở nên tốn thời gian và không hiệu quả.
Việc ăn ngoài hiện nay gặp nhiều vấn đề, trong đó an toàn vệ sinh thực phẩm không được đảm bảo, giá món ăn cao hơn thực tế, và thái độ phục vụ của nhân viên chưa ổn định.
Trong thời đại công nghệ 4.0, việc nấu nướng trở nên dễ dàng hơn bao giờ hết nhờ vào Internet, cho phép người dùng truy cập vào nhiều trang web và ứng dụng dạy nấu ăn Các nhà phát triển ứng dụng đang tìm cách tiếp cận rộng rãi hơn bằng cách xây dựng ứng dụng nấu ăn trên nhiều nền tảng như Android, iOS, Windows, MacOS và web Thay vì phải học nhiều ngôn ngữ và công nghệ khác nhau cho từng nền tảng, các công cụ lập trình đa nền tảng như Flutter, React Native và Ionic đã ra đời, giúp tiết kiệm thời gian và chi phí trong quá trình phát triển ứng dụng.
Flutter, mặc dù ra đời muộn, nhưng phát triển nhanh chóng và vượt trội hơn nhiều công nghệ trước đó, được nhiều công ty lớn như Google, Alibaba và Tencent sử dụng Sự phổ biến của Flutter đến từ tính năng hot reload, cho phép nhà phát triển và nhà thiết kế thấy ngay những thay đổi, giúp tăng tốc độ phát triển Khác với React Native, Flutter hỗ trợ thiết kế giao diện người dùng dựa trên widget, mang lại khả năng phát triển ứng dụng đa nền tảng một cách nhanh chóng.
Dựa trên nhu cầu thực tế và các cơ sở nghiên cứu, nhóm chúng tôi đã quyết định khám phá Flutter và áp dụng framework này để phát triển một ứng dụng hướng dẫn nấu ăn.
Các ứng dụng tương tự
1.2.1 Ứng dụng Sách nấu ăn
Sách nấu ăn là ứng dụng nấu ăn với hơn 13,900 công thức chế biến món ngon, được cập nhật liên tục Ứng dụng không chỉ cung cấp hướng dẫn nấu ăn mà còn chia sẻ những mẹo vặt hữu ích giúp việc nấu nướng trở nên dễ dàng hơn.
• Nhiều công thức món ngon và được 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 món ngon thêm hoàn hảo
• Lưu và chia sẻ bài viết với mọi người
• Không cho phép tạo công thức nấu ăn của riêng người dùng
• Không cho phép tạo cộng động trong ứng dụng
• Chỉ có chủ ứng dụng mới có thể thêm, bớt công thức
• UI/UX của ứng dụng khá tệ
Hình 1 Ứng dụng Sách nấu ăn
Cookpad mang đến cho bạn hàng ngàn công thức nấu ăn ngon, đơn giản và dễ thực hiện từ cộng đồng Bạn có thể nhắn tin trực tiếp với tác giả của món ăn để nhận được sự hỗ trợ và giải đáp cho những thắc mắc của mình.
• Dễ dàng chia sẻ, xuất bản công thức nấu ăn của riêng mình
• Giao diện thân thiện, tìm kiếm các công thức nâu ăn dễ dàng
• Số lượng người dùng Việt lớn, hỗ trợ tiếng Việt tốt
• Nhiều công thức nấu ăn để lựa chọn
• Tạo môi trường kết nối tốt cho những người yêu nấu nướng
• Chỉ cho phép tìm kiếm theo ngôn ngữ quốc gia mà bạn đăng ký
• Ít tính năng hỗ trợ
• Chỉ sử dụng được khi online
Ứng dụng Cooky hiện có hơn 31.000 công thức nấu ăn đa dạng từ món Á đến món Âu với hình ảnh minh họa chi tiết Ngoài việc cung cấp hướng dẫn nấu ăn, Cooky còn mang đến cho người dùng trải nghiệm giải trí với video các món ăn ngon và những mẹo vặt hữu ích trong bếp.
• Có cộng đồng người dùng Việt lớn, hỗ trợ tiếng Việt tốt
• Giao diện thân thiện, dễ sử dụng
• Có nhiều tính năng hỗ trợ như: mua hàng online, đăng ký tham gia lớp học nấu ăn online,
• Dễ dàng chia sẻ công thức nấu ăn của riêng mình
• Tạo môi trường kết nối tốt cho những người yêu nấu nướng
• Đây là ứng dụng nấu ăn thuần Việt 100% nên cộng đồng người dùng chỉ giới hạn ở Việt Nam
• Chỉ sử dụng được khi online
1.3 Mục tiêu của đề tài
- Nghiên cứu về các công nghệ lập trình Flutter
- Tìm hiểu các nghiệp vụ của một ứng dụng hướng dẫn nấu ăn trong thực tế
- Áp dụng và triển khai các kiến thức đã nghiên cứu và học hỏi vào hiện thực hóa ứng dụng
- Người dùng có niềm đam mê nấu nướng, có nhu cầu tìm kiếm công thức nấu ăn trên nền tảng ứng dụng di động
- Xây dựng ứng dụng di động bằng Flutter, service được xây dựng bằng ngôn ngữ Dart
- Xây dựng ứng dụng hướng đến người dùng có nhu cầu tìm kiếm công thức nấu ăn trên mạng.
Đối tượng nghiên cứu
- Người dùng có niềm đam mê nấu nướng, có nhu cầu tìm kiếm công thức nấu ăn trên nền tảng ứng dụng di động.
Phạm vi nghiên cứu
- Xây dựng ứng dụng di động bằng Flutter, service được xây dựng bằng ngôn ngữ Dart
- Xây dựng ứng dụng hướng đến người dùng có nhu cầu tìm kiếm công thức nấu ăn trên mạng.
TÌM HIỂU CÔNG NGHỆ
Lịch sử
Flutter là một SDK mã nguồn mở do Google phát triển, với phiên bản đầu tiên mang tên “Sky” chạy trên Android, được công bố tại hội nghị nhà phát triển Dart 2015 Mục tiêu ban đầu của Flutter là đạt tốc độ kết xuất ổn định 120 khung hình trên giây 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, đánh dấu phiên bản ổn định đầu tiên Ngày 11 tháng 12 năm 2019, sự kiện Flutter Interact giới thiệu nhiều nâng cấp cùng với Flutter 1.12 Đến ngày 30 tháng 4 năm 2021, phiên bản mới nhất là 2.0.6.
Tổng quan
Flutter là một framework UI do Google phát triển, giúp tạo ra giao diện chất lượng cao cho cả iOS và Android một cách nhanh chóng Với Flutter, lập trình viên và các tổ chức có thể sử dụng mã nguồn có sẵn để tiết kiệm thời gian và công sức trong quá trình phát triển ứng dụng.
Dart là ngôn ngữ lập trình đa mục đích được phát triển bởi Google và được Ecma phê chuẩn theo tiêu chuẩn ECMA-408 Ngôn ngữ này được sử dụng để xây dựng ứng dụng web, server, máy tính để bàn và thiết bị di động Dart là ngôn ngữ hướng đối tượng, có cơ chế garbage-collected và sử dụng cú pháp kiểu C để chuyển đổi mã sang JavaScript Nó hỗ trợ nhiều tính năng như interface, mixin, abstract, generic, static typing và sound type, giúp đảm bảo tính an toàn cho kiểu dữ liệu Dart là mã nguồn mở, miễn phí và được phát triển trên GitHub, hiện đã phát hành phiên bản 2.2.
Các nhà phát triển tại Google và nhiều nơi khác đang sử dụng Dart để phát triển các ứng dụng chất lượng cao cho iOS, Android và web Với các tính năng tối ưu cho phát triển phía khách hàng, Dart trở thành lựa chọn lý tưởng cho cả ứng dụng di động và web.
Dart tối ưu hóa quá trình biên dịch trước thời hạn, giúp nâng cao hiệu suất và rút ngắn thời gian khởi động trên các thiết bị di động và web.
Dart là một ngôn ngữ lập trình quen thuộc với nhiều nhà phát triển nhờ vào cú pháp dễ hiểu và định hướng đối tượng rõ ràng Nếu bạn đã có kinh nghiệm với C++, C# hoặc Java, bạn sẽ có thể làm quen và làm việc hiệu quả với Dart chỉ trong vài ngày.
Flutter hỗ trợ cả hai cách biên dịch là AOT(Ahead Of Time) compiler và JIT(Just In Time) compiler
Ahead Of Time (AOT) là phương pháp biên dịch ngôn ngữ Dart trực tiếp sang mã máy Native Code, mang lại hiệu suất tối ưu nhất Khi chương trình được chạy, AOT thực hiện biên dịch toàn bộ mã nguồn từ đầu đến cuối, đảm bảo hiệu năng cao nhất cho ứng dụng.
Just In Time (JIT) cho phép tính năng hot reloading hoạt động, giúp phát triển sản phẩm nhanh chóng và tiện lợi hơn Điều này có thể hiểu như việc debug trong các ngôn ngữ khác, khi mà mỗi hàm được gọi sẽ được biên dịch ngay lập tức, giúp tối ưu hóa quy trình phát triển.
Cấu trúc trong Flutter bao gồm :
• Flutter engine: Phương tiện của Flutter
• Foundation Library: Thư viện nền tảng
Flutter engine là một nền tảng chạy ứng dụng di động chất lượng cao, chủ yếu dựa trên ngôn ngữ C++ Nó tích hợp các thư viện lõi của Flutter, bao gồm hỗ trợ cho hoạt ảnh, đồ họa, I/O tệp, mạng, kiến trúc plugin và khả năng hỗ trợ trợ năng Đặc biệt, Flutter engine sử dụng thư viện đồ họa mã nguồn mở Skia của Google để hiển thị đồ họa cấp thấp, giúp phát triển, biên dịch và chạy các ứng dụng Flutter một cách hiệu quả.
Trong Flutter, mọi thứ đều là một widget, đây là khái niệm cốt lõi của framework này Widget đóng vai trò là thành phần giao diện người dùng, ảnh hưởng và kiểm soát chế độ xem cũng như giao diện của ứng dụng Chúng đại diện cho một mô tả bất biến về một phần của giao diện, bao gồm đồ họa, văn bản, hình dạng và hoạt ảnh được tạo ra từ các widget Các widget trong Flutter tương tự như các thành phần trong React.
Ưu, nhược điểm
- Flutter là bộ open-source SDK , tức là miễn phí và mở – cộng đồng developer có thể cùng tham gia phát triển
- Giao diện đẹp ( impressive UI) : Flutter cung cấp rất nhiều các widget, với nhiều sự lựa chọn Giao diện khá đẹp và sắc nét
- Viết code ứng dụng nhanh hơn: Như các bạn đã biết, tầng Framework của Flutter được viết bằng Dart- một ngôn ngữ hướng đối tượng hỗ trợ JIT(Just
Hot reload là tính năng hỗ trợ lập trình viên cập nhật ứng dụng nhanh chóng khi có sự thay đổi trong mã nguồn, mà không cần phải xây dựng lại toàn bộ ứng dụng Chỉ cần nhấn nút hot reload, bạn sẽ thấy ngay những thay đổi mà mình đã thực hiện, điều này giúp tăng hiệu suất và tiết kiệm thời gian trong quá trình phát triển ứng dụng.
Native performance delivers a smooth user experience akin to that of native applications The Dart programming language supports Ahead of Time (AOT) compilation, which enhances performance and reduces startup time, leading to faster application responsiveness.
Thời gian xây dựng ứng dụng được rút ngắn và chi phí giảm thiểu nhờ việc viết code nhanh chóng, sử dụng một basecode duy nhất cho cả hai nền tảng Android và iOS Điều này không chỉ giúp quá trình kiểm tra và sửa lỗi diễn ra nhanh hơn mà còn tiết kiệm đáng kể chi phí phát triển ứng dụng.
- Hiện nay, Flutter đang rất được ưa chuộng với các developer bởi sự linh hoạt, đơn giản và nhanh chóng trong việc phát triển sản phẩm
Flutter vẫn đang trong quá trình hoàn thiện, vì đây là một ứng dụng mới nên chưa đạt đến mức hoàn hảo Nhiều tính năng nâng cao của Flutter vẫn chưa được hỗ trợ đầy đủ, và nhiều thư viện chưa trải qua thử nghiệm chính thức, dẫn đến một số hạn chế khi so sánh với các phiên bản gốc như Google Maps.
Dart là một ngôn ngữ lập trình tương đối "non nớt", tương tự như Swift và Kotlin, nhưng có ít tính năng hơn hoặc các tính năng hiện có chưa được phát triển đầy đủ.
- Các ứng dụng Flutter khá "nặng" Chúng chiếm nhiều dung lượng và mất nhiều thời gian để tải xuống hoặc cập nhật
Giao diện của Flutter không hoàn toàn giống với phiên bản gốc, vì Flutter không tạo ra các thành phần gốc mà chỉ sao chép một cách không hoàn hảo các thiết kế Material Design của Android và các thành phần riêng của iOS thông qua thư viện Cupertino Thư viện này đặc biệt thể hiện rõ ràng với các phiên bản hệ thống có chứa các trường văn bản hoặc nút, cho thấy sự khác biệt về hình thức bên ngoài nhưng không thay đổi cấu trúc bên trong của Flutter.
Khung công tác phát triển nhanh chóng đang tạo ra thách thức trong việc duy trì mã nguồn Hơn nữa, tương lai của Flutter vẫn chưa chắc chắn khi Google liên tục loại bỏ các dự án liên quan đến ứng dụng này.
Khi nào nên sử dụng Flutter
Flutter hiện tại chưa đủ hoàn thiện để xử lý các dự án phức tạp, nhưng lại là một giải pháp lý tưởng cho các dự án nhỏ, đặc biệt phù hợp với các công ty khởi nghiệp.
Flutter là công cụ lý tưởng để thử nghiệm ứng dụng di động của bạn Nếu bạn có ý tưởng về một ứng dụng nhưng chưa chắc chắn về tính khả thi, hãy xây dựng MVP bằng Flutter để tiết kiệm chi phí và theo dõi hiệu suất Nếu MVP thành công, bạn có thể phát triển nó thành ứng dụng di động native.
Nếu bạn có nguồn lực hạn chế, Flutter là một giải pháp hiệu quả Việc phát triển hai ứng dụng riêng biệt tốn nhiều thời gian và chi phí, trong khi Flutter cho phép các công ty tái sử dụng mã code, giúp hiện thực hóa ý tưởng mà không cần đầu tư quá nhiều vốn.
So sánh cơ bản Flutter và React Native
Hai framework phát triển ứng dụng di động đa nền tảng phổ biến nhất hiện nay là Flutter và React Native Flutter, được phát triển bởi Google, và React Native, do Facebook tạo ra, đều nhận được sự hỗ trợ mạnh mẽ từ hai công ty công nghệ hàng đầu thế giới.
React Native đang trở nên phổ biến hơn Flutter, nhờ vào sự kết nối với framework React-web nổi tiếng Với thời gian tồn tại lâu hơn, React Native đã thu hút được một lượng người dùng lớn hơn Điều này dẫn đến nhu cầu cao hơn đối với các công ty phát triển ứng dụng sử dụng React Native so với các công ty phát triển ứng dụng dựa trên Flutter.
Flutter đang phát triển nhanh chóng và rất phù hợp cho các dự án tập trung vào animation và layout phức tạp Với ưu điểm sử dụng bộ render tự làm, giao tiếp trực tiếp với GPU và SDK hỗ trợ viết animation dễ dàng, Flutter là lựa chọn lý tưởng cho các đội ngũ phát triển native muốn nâng cao trải nghiệm người dùng trong ứng dụng của họ Tuy nhiên, số lượng Flutter Developer hiện tại còn hạn chế, gây khó khăn trong việc tìm kiếm nhân lực.
Mục tiêu chính của các ngôn ngữ phát triển đa nền tảng như Flutter và React Native là rút ngắn thời gian ra mắt sản phẩm, đồng thời nâng cao hiệu quả phát triển ứng dụng di động, mang lại sự hấp dẫn cho cả lập trình viên và người dùng.
Sau đây là bảng so sánh giữa Flutter và React Native:
Flutter React Native Định nghĩa Là công cụ phát triển UI của
Google dành cho phát triển các ứng dụng dành cho di động, máy tính, và trang web chỉ với một codebase
Là một Framework giúp xây dựng ứng dụng native iOS và Android bằng Javascript được phát triển bởi Facebook.
Người sáng lập Google Facebook
Thời gian phát hành chính thức Tháng 12/ 2018, trong sự kiện Google I/O Tháng 3 / 2015, trong sự kiện
Ngôn ngữ lập trình Dart Javascript
Miễn phí và mã nguồn mở Có Có
Khi nào nên sử dụng - Nếu bạn muốn thử nghiệm ứng dụng của mình
- Nếu bạn chỉ xây dựng một dự án nhỏ
- Nếu bạn muốn trải nghiệm công nghệ mới
- Nếu bạn biết lập trình Javascript
- Nếu bạn cần xây dựng ứng dụng phức tạp với nhiều thư viện hỗ trợ
- Nếu bạn mới bắt đầu học, cần các tài liệu và sự hỗ trợ của cộng đồng.
Bảng 1 Bảng so sánh Flutter với React Native
PHÂN TÍCH THIẾT KẾ ỨNG DỤNG
Phân tích
3.1.1 Danh sách yêu cầu hệ thống
Dựa trên khảo sát từ người dùng và nghiên cứu các ứng dụng tương tự, nhóm chúng tôi đã tổng hợp danh sách các chức năng cần thiết cho ứng dụng.
Bảng 2 Danh sách các yêu cầu nghiệp vụ
STT Tên yêu cầu Ghi chú
1 Đăng nhập bằng google Người dùng sử dụng tài khoản google để đăng nhập vào ứng dụng
2 Xem chi tiết công thức nấu ăn Người dùng có thể xem chi tiết công thức nấu ăn của mình hoặc của người khác chia sẻ trên ứng dụng
3 Tìm kiếm công thức món ăn Người dùng có thể tìm kiếm món ăn theo tên món trên thanh tìm kiếm
4 Lịch sử xem món ăn Người dùng có thể xem lịch sử các món ăn đã tìm kiếm gần đây
5 Lưu món ăn Người dùng có thể lưu công thức nấu ăn với món ăn mà mình yêu thích
6 Like bài đăng công thức nấu ăn Người dùng có thể like bài đăng công thức nấu ăn để bài đăng được nổi bật
7 Bình luận bài đăng công thức nấu ăn
Người dùng có thể trực tiếp bình luận cho chủ nhân công thức thông qua ứng dụng, nhằm đặt câu hỏi về công thức và nguyên liệu khi cần làm rõ thông tin.
8 Xem thông tin trang bếp của người dùng khác
Người dùng có thể xem thông tin trang bếp của người dùng khác
9 Kết bạn bếp với người dùng khác Người dùng có thể kết bạn bếp với người dùng khác bằng cách theo dõi hoặc hủy theo dõi người đó
10 Đăng công thức nấu ăn Người dùng có thể đăng công thức nấu ăn của mình lên ứng dụng
11 Quản lý công thức nấu ăn Người dùng có thể đăng hoặc xóa các công thức đã đăng
12 Quản lý trang bếp cá nhân Người dùng có thể xem món đã lưu, món của tôi, bạn bè
Bảng 3 Danh sách các actors
STT Tên Actor Ý nghĩa/Ghi chú
1 User Người đã đăng nhập vào hệ thống, có thể chia sẻ công thức nấu ăn, xem công thức ngươi dùng khác chia sẻ,…
Bảng 4 Danh sách các Use-case
STT Tên Use-case Ý nghĩa/Ghi chú
1 Đăng nhập bằng google Người dùng sử dụng tài khoản google để đăng nhập vào ứng dụng
2 Xem công thức nấu ăn Người dùng có thể xem chi tiết công thức nấu ăn của mình hoặc của người khác chia sẻ trên ứng dụng
3 Lưu món ăn Người dùng có thể lưu công thức nấu ăn với món ăn mà mình yêu thích
Người dùng có thể dễ dàng tìm kiếm công thức nấu ăn bằng cách nhập tên món ăn vào thanh tìm kiếm Bên cạnh đó, họ còn có thể xem lại lịch sử các món ăn đã tìm kiếm gần đây để thuận tiện hơn trong việc lựa chọn.
5 Like bài đăng Người dùng có thể like bài đăng công thức nấu ăn để bài đăng được nổi bật
Bảng 5 Đặc tả chức năng đăng nhập bằng google
Tên Use-Case Đăng nhập bằng google
Người dùng cần sử dụng tài khoản Google để đăng nhập vào ứng dụng, và điều kiện tiên quyết là thiết bị của họ phải có kết nối Internet ổn định.
PRE-2 Người dùng đã có tài khoản google Điều kiện sau Người dùng đăng nhập thành công
Người dùng có thể để lại bình luận trực tiếp cho chủ nhân của công thức qua ứng dụng, giúp họ hỏi thêm về công thức và nguyên liệu nếu có điều gì chưa rõ ràng.
7 Xem thông tin trang bếp của người khác
Người dùng có thể xem thông tin trang bếp của người dùng khác
8 Kết bạn bếp Người dùng có thể kết bạn bếp với người dùng khác bằng cách theo dõi hoặc hủy theo dõi người đó
9 Quản lý công thức nấu ăn Người dùng có thể đăng hoặc xóa các công thức đã đăng
Quản lý trang bếp cá nhân cho phép người dùng dễ dàng xem các món ăn đã lưu, món ăn của bản thân và bạn bè Người dùng cũng có khả năng xóa món đã lưu và hủy theo dõi bạn bè một cách thuận tiện.
11 Đăng xuất Người dùng đăng xuất khỏi hệ thống
Dòng sự kiện chính 1 Người dùng truy cập vào ứng dụng
2 Nhấn nút “Đăng nhập bằng Google”
3 Người dùng chọn tài khoản google của mình để đăng nhập
4 Hệ thống xác thực thông tin đăng nhập thành công và cho phép người dùng truy cập vào hệ thống
Dòng sự kiện phụ Đăng nhập hệ thống không thành công
1 Hệ thống xác thực thông tin đăng nhập không thành công và hiển thị thông báo
Bảng 6 Đặc tả chức năng xem công thức nấu ăn
Tên Use-Case Xem công thức nấu ăn
Người dùng có thể xem các công thức nấu ăn được chia sẻ trên ứng dụng, nhưng trước tiên, thiết bị của họ cần phải kết nối Internet.
PRE-2 Người dùng đã đăng nhập vào hệ thống Điều kiện sau Không có
Dòng sự kiện chính 1 Ngươi dùng khởi động ứng dụng
2 Hệ thống cập nhập các công thức nấu ăn được chia sẻ về ứng dụng
3 Người dùng chọn công thức muốn xem
4 Hệ thống hiển thị công thức cho người dùng Dòng sự kiện phụ Không có
Bảng 7 Đặc tả chức năng lưu món ăn
Tên Use-Case Lưu món ăn
Người dùng có thể lưu công thức nấu ăn cho món ăn mà mình yêu thích, tuy nhiên, để thực hiện điều này, thiết bị của họ cần phải được kết nối với Internet.
PRE-2 Người dùng đã đăng nhập vào hệ thống Điều kiện sau Không có
Dòng sự kiện chính 1 Người dùng khởi động ứng dụng
2 Nhấn vào biểu tượng Lưu trên bài đăng công thức nấu ăn
3 Hệ thống sẽ lưu và hiển thị công thức nấu ăn đó vào mục
“Món đã lưu” ở trang bếp cá nhân Dòng sự kiện phụ Không có
Bảng 8 Đặc tả chức năng tìm kiếm công thức nấu ăn
Tên Use-Case Tìm kiếm công thức nấu ăn
Người dùng có thể tìm kiếm món ăn theo nhu cầu bằng cách nhập tên món ăn Để thực hiện điều này, thiết bị của người dùng cần được kết nối Internet.
PRE-2 Người dùng đã đăng nhập vào hệ thống Điều kiện sau Không có
Dòng sự kiện chính Tìm kiếm thành công
1 Người dùng khởi động ứng dụng
2 Người dùng nhập thông tin cần tìm kiếm vào thanh tìm kiếm
3 Hệ thống truy xuất trong database những công thức có từ khóa trong nội dung tìm kiếm và hiển thị cho người dùng
Xem lịch sử món ăn đã tìm kiếm gần đây
1 Hệ thống sẽ lưu lại những món ăn bạn đã xem gần đây
2 Người dùng vào trang tìm kiếm
3 Người dùng xem mục “Món bạn đã xem”
4 Hệ thống sẽ hiển thị món ăn bạn đã xem gần đây
Bảng 9 Đặc tả chức năng like bài đăng
Tên Use-Case Like bài đăng
Để bài đăng công thức nấu ăn nổi bật, người dùng cần nhấn like vào bài viết Điều kiện tiên quyết là thiết bị của người dùng phải được kết nối Internet.
PRE-2 Người dùng đã đăng nhập vào hệ thống Điều kiện sau Không có
Dòng sự kiện chính 1 Người dùng khởi động ứng dụng
2 Người dùng nhấn biểu tượng Like trên bài đăng công thức nấu ăn
3 Hệ thống sẽ hiển thị tăng số lượt thích lên 1 và in đậm biểu tượng Like
Bảng 10 Đặc tả chức năng bình luận bài đăng
Tên Use-Case Bình luận bài đăng
Người dùng có thể trực tiếp bình luận với chủ nhân công thức qua ứng dụng để hỏi thêm về công thức và nguyên liệu nếu cần làm rõ Để thực hiện điều này, thiết bị của người dùng cần phải được kết nối Internet.
PRE-2 Người dùng đã đăng nhập vào hệ thống Điều kiện sau Không có
Dòng sự kiện chính 1 Người dùng khởi động ứng dụng
2 Người dùng nhấn vào trường “Thêm bình luận”
3 Hệ thống hiển thị trang bình luận
4 Người dùng nhập bình luận và nhấn biểu tượng Gửi
5 Hệ thống sẽ hiển thị bình luận dưới bài đăng và tăng số lượt bình luận lên 1
Dòng sự kiện phụ Không có
Bảng 11 Đặc tả chức năng xem thông tin trang bếp của người khác
Tên Use-Case Xem thông tin trang bếp của người khác
Mô tả tóm tắt Người dùng có thể xem thông tin trang bếp của người khác Điều kiện trước PRE-1 Thiết bị của người dùng phải kết nối Internet
PRE-2 Người dùng đã đăng nhập vào hệ thống Điều kiện sau Không có
Dòng sự kiện chính 1 Chọn avatar người dùng mà mình muốn xem
2 Hệ thống hiển thị trang bếp của người đó
3 Tại đây, người dùng có thể xem được tên và món ăn của người đó
Dòng sự kiện phụ Không có
Bảng 12 Đặc tả chức năng kết bạn bếp
Tên Use-Case Kết bạn bếp
Người dùng có thể kết bạn bếp với người khác thông qua việc theo dõi hoặc hủy theo dõi Để thực hiện điều này, thiết bị của người dùng cần phải được kết nối Internet.
PRE-2 Người dùng đã đăng nhập vào hệ thống
PRE-3 Người dùng đang ở trang bếp của người đó Điều kiện sau Không có
Dòng sự kiện chính 1 Người dùng đang ở trang bếp của người mình muốn kết bạn
3 Hệ thống sẽ lưu lại và hiển thị thông tin người đó vào mục “Đang theo dõi” ở trang bếp cá nhân của người dùng
Dòng sự kiện phụ Không có
Bảng 13 Đặc tả chức năng quản lý công thức nấu ăn
Tên Use-Case Quản lý công thức nấu ăn
Người dùng có khả năng đăng tải công thức nấu ăn mới và xóa những công thức đã được đăng trước đó, với điều kiện thiết bị của họ phải được kết nối Internet.
PRE-2 Người dùng đã đăng nhập vào hệ thống Điều kiện sau Không có
Dòng sự kiện chính Đăng công thức nấu ăn thành công
1 Người dùng truy cập vào trang bếp cá nhân
3 Hệ thống sẽ hiển thị trang đăng công thức nấu ăn
4 Người dùng nhập thông tin công thức nấu ăn của mình
6 Hệ thống lưu công thức người dùng vừa tạo và hiển thị thông báo thành công cho người dùng
7 Công thức nấu ăn sẽ được hệ thống chia sẻ lên ứng dụng và hiển thị trong mục “Món của tôi” ở trang bếp cá nhân Xóa công thức nấu ăn thành công
1 Người dùng truy cập vào trang cá nhân
3 Người dùng chọn công thức muốn xóa
4 Nhấn dấu ba chấm dọc chọn “Xóa món này”
5 Hệ thống xóa công thức người dùng vừa chọn và hiển thị thông báo thành công cho người dùng
Dòng sự kiện phụ Không có
Bảng 14 Đặc tả chức năng quản lý trang bếp cá nhân
Tên Use-Case Quản lý trang bếp cá nhân
Người dùng có thể dễ dàng xem các món ăn đã lưu, món của tôi và món của bạn bè Ngoài ra, họ cũng có khả năng xóa các món đã lưu khi không còn nhu cầu Lưu ý rằng thiết bị của người dùng cần phải kết nối Internet để thực hiện các chức năng này.
PRE-2 Người dùng đã đăng nhập vào hệ thống Điều kiện sau Không có
Sự kiện chính Xem món đã lưu
1 Người dùng truy cập vào trang bếp cá nhân
2 Chọn mục “Món đã lưu”
3 Hệ thống sẽ hiển thị các món người dùng đã lưu
4 Người dùng chọn món để xem Xem món của tôi
1 Người dùng truy cập vào trang bếp cá nhân
2 Chọn mục “Món của tôi”
3 Hệ thống sẽ hiển thị các món của người dùng
4 Người dùng chọn món để xem Xem món đã lưu
1 Người dùng truy cập vào trang bếp cá nhân
2 Chọn mục “Món đã lưu”
3 Hệ thống sẽ hiển thị các món người dùng đã lưu
4 Người dùng chọn món để xem Xem bạn bè
1 Người dùng truy cập vào trang bếp cá nhân
2 Chọn mục “Đang theo dõi”
3 Hệ thống sẽ hiển thị những người mà người dùng đang theo dõi
4 Người dùng chọn người để xem Xóa món đã lưu
1 Người dùng truy cập vào trang bếp cá nhân
2 Chọn mục “Món đã lưu”
3 Hệ thống sẽ hiển thị các món người dùng đã lưu
4 Người dùng chọn món cần xóa
5 Nhấn dấu ba chấm dọc rồi chọn “Xóa món này”
6 Hệ thống xóa công thức người dùng vừa chọn và hiển thị thông báo thành công cho người dùng
Sự kiện phụ Không có
Bảng 15 Đặc tả chức năng đăng xuất
Tên Use-Case Đăng xuất
Mô tả tóm tắt Người dùng đăng xuất khỏi hệ thống Điều kiện trước PRE-1 Thiết bị của người dùng phải có kết nối Interner
PRE-2 Người dùng đã có tài khoản google PRE-3 Người dùng đang ở trang bếp cá nhân Điều kiện sau Người dùng đăng xuất thành công
Sự kiện chính 1 Người dùng khởi động ứng dụng
2 Người dùng vào trang bếp cá nhân
3 Người dùng chọn vào dấu ba chấm dọc trên thanh appbar
4 Người dùng chọn đăng xuất
5 Hệ thống sẽ đăng xuất người dùng, chuyển người dùng tới trang đăng nhập
Sự kiện phụ Không có
Thiết kế
3.2.1 Thiết kế cơ sở dữ liệu
Cơ sở dữ liệu trên thiết bị được thiết kế theo mô hình SQL nhằm đáp ứng yêu cầu nhỏ, gọn và cài đặt dễ dàng
Bảng 16 Danh sách các bảng trong sơ đồ Logic
2 FOOD Công thức nấu ăn
4 INGREDIENT Nguyên liệu nấu ăn
5 METHOD Các bước nấu ăn
6 METHOD_IMAGE Ảnh minh họa cho các bước nấu ăn
7 SAVEFOOD Lưu công thức nấu ăn
8 FOLLOWING Theo dõi người dùng khác
9 LIKE Yêu thích món ăn
Bảng 17 Danh sách trường bảng USER
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 uid STRING Khóa chính Mã người dùng
2 imageUrl STRING Đường dẫn hình ảnh đại diện người dùng
3 name STRING Tên người dùng
Bảng 18 Danh sách trường bảng FOOD
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id STRING Khóa chính Mã công thức nấu ăn
2 userID STRING Khóa ngoại đến
3 imageUrl STRING NOT NULL Hình ảnh món ăn
5 name STRING NOT NULL Tên món ăn
6 description STRING Mô tả món ăn
8 cookTime INT Thời gian nấu
Bảng 19 Danh sách trường bản COMMENT
STT Tên trường) Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id STRING Khóa chính Mã bình luận
2 userID STRING Khóa ngoại đến
3 foodID STRING Khóa ngoại đến
Mã công thức nấu ăn
4 message STRING NOT NULL Tin nhắn
5 timeCreated DateTime NOT NULL Thời gian gửi tin nhắn
Bảng 20 Danh sách trường bản INGREDIENT
STT Tên trường) Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id STRING Khóa chính Mã nguyên liệu
2 foodID STRING Khóa ngoại đến
Mã công thức nấu ăn
3 content STRING NOT NULL Nội dung nguyên liệu
Bảng 21 Danh sách trường bản METHOD
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id STRING Khóa chính Mã cách làm
2 foodID STRING Khóa ngoại đến
Mã công thức nấu ăn
3 content STRING NOT NULL Nội dung các bước
Bảng 22 Danh sách trường bản METHOD_IMAGE
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id STRING Khóa chính Mã hình ảnh minh họa cho các bước
2 methodID STRING Khóa ngoại đến
3 imageUrl STRING Đường dẫn hình ảnh minh họa
Bảng 23 Danh sách trường bản SAVEFOOD
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 userID STRING Khóa ngoại đến
2 foodID STRING Khóa ngoại đến
Mã công thức nấu ăn
Bảng 24 Danh sách trường bảng FOLLOWING
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 userID STRING Khóa ngoại đến
2 OtherUserID STRING Khóa ngoại đến
Bảng 25 Danh sách trường bảng LIKE
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 id STRING Khóa chính Mã lượt yêu thích
2 userID STRING Khóa ngoại đến
3 foodID STRING Khóa ngoại đến
Mã công thức nấu ăn
Bảng 26 Danh sách các màn hình
STT Tên màn hình Ý nghĩa/Ghi chú
1 Màn hình khởi động ứng dụng Khởi động ứng dụng
2 Màn hình đăng nhập Đăng nhập tài khoản google vào ứng dụng
3 Màn hình trang chủ Hiển thị, cập nhật thông tin công thức nấu ăn
4 Màn hình chi tiết công thức nấu ăn
Hiển thị chi tiết thông tin công thức nấu ăn
5 Màn hình bình luận Nhắn tin với chủ sở hữu món ăn
6 Màn hình trang bếp của người khác
Hiển thị, xem trang bếp của người dùng khác
7 Màn hình tìm kiếm công thức nấu ăn
Tìm kiếm công thức nấu ăn
8 Màn hình đăng công thức nấu ăn
Nhập thông tin công thức nấu ăn của mình và chia sẻ lên ứng dụng
9 Màn hình trang bếp cá nhân Hiển thị, xem món đã lưu, món của tôi, bạn bè
3.2.2.1 Màn hình khởi động ứng dụng
Hình 8 Màn hình khởi động ứng dụng
Hình 9 Màn hình đăng nhập Bảng 27 Bảng thành phần màn hình đăng nhập
STT Tên thành phần Loại Chức năng
Button Đăng nhập vào ứng dụng bằng tài khoản google
Hình 10 Màn hình trang chủ Bảng 28 Bảng thành phần màn hình trang chủ
STT Tên thành phần Loại Chức năng
1 Avatar CircleAvatar Ảnh đại diện của người dùng
Button Lưu công thức nấu ăn
Button Yêu thích bài đăng
4 Thêm bình luận TextField Chuyển đến màn hình bình luận
3.2.2.4 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 màn hình chi tiết công thức nấu ăn
STT Tên thành phần Loại Chức năng
1 Image DecoratedBox Ảnh nền của món ăn
2 Informations Container Hiển thị tên, xuất xứ, thời gian nấu, khẩu phần của món ăn và chủ sở hữu
3 Nguyên liệu Container Các nguyên liệu cần chuẩn bị cho món ăn
4 Cách làm Container Chi tiết các bước chế biến
3.2.2.5 Màn hình bình luận bài đăng
Hình 12 Màn hình bình luận bài đăng Bảng 30 Bảng thành phần màn hình bình luận bài đăng
STT Tên thành phần Loại Chức năng
1 Avatar CircleAvatar Ảnh đại diện của người dùng
2 timeCreated DateTime Thời gian gửi tin nhắn
3 Message TextField Nhập tin nhắn
4 Biểu tượng Gửi Button Gửi tin nhắn
3.2.2.6 Màn hình trang bếp của người dùng khác
Hình 13 Màn hình trang bếp của người khác Bảng 31 Bảng thành phần màn hình trang bếp của người dùng khác
STT Tên thành phần Loại Chức năng
1 Avatar CircleAvatar Ảnh đại diện của người dùng
2 Name Text Tên người dùng
3 Theo dõi Button Theo dõi hoặc hủy theo dõi người đó
4 SearchInput TextField Nhập thông tin tìm kiếm món ăn
5 ListRecipe ListView Hiển thị các món ăn của người đó
6 Back Button Quay trở lại màn hình trang chủ
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 mà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 năng
1 SearchInput TextField Nhập thông tin tìm kiếm món ăn
2 Món bạn đã xem ListView Hiển thị danh sách các món bạn đã xem
3 Món gợi ý ListView Tìm kiếm theo loại thức ăn
3.2.2.8 Màn hình đăng công thức
Hình 15 màn hình đăng công thức nấu ăn Bảng 33 Bảng thành phần màn hình đăng công thức nấu ăn
STT Tên thành phần Loại Chức năng
1 Thêm món Button Chia sẻ công thức nấu ăn lên ứng dụng
2 Camera InkWell Chọn hình ảnh cho món ăn
3 Tên món ăn TextField Nhập tên món ăn
4 Miêu tả món ăn TextField Nhập miêu tả món ăn
5 Khẩu phần TextField Nhập khẩu phần ăn
6 Thời gian nấu TextField Nhập thời gian nấu
7 Nguyên liệu TextField Nhập nguyên liệu của món ăn
Button Thêm/ xóa textfield nguyên liệu
9 Cách làm TextField Nhập các bước làm món ă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 màn hình bếp cá nhân
3.2.2.9 Màn hình trang bếp cá nhân
Hình 16 Màn hình trang bếp cá nhân Bảng 34 Bảng thành phần màn hình trang bếp cá nhân
STT Tên thành phần Loại Chức năng
1 Avatar CircleAvatar Ảnh đại diện người dùng
2 Name Text Tên người dùng
3 Món mới Button Chuyển đến màn hình đăng công thức nấu ăn
4 Dấu ba chấm Button Chọn đăng xuất để thoát khỏi ứng dụng
5 Món đã lưu Tab Chuyển đến tab món đã lưu
6 Món của tôi Tab Chuyển đến tab món của tôi
7 Đang theo dõi Tab Chuyển đến tab đang theo dõi
8 SearchInput TextField Nhập thông tin tìm kiếm món ăn
9 ListRecipes ListView Danh sách các món đã lưu, món của tôi
Hình 17 Sơ đồ kiến trúc hệ thống
