Đồ án xây dựng ứng dụng di động hỗ trợ dinh dưỡng với chat real time

Cơ sở lý thuyết & Công nghệ

Flutter [1]

Flutter là framework UI di động của Google, cho phép phát triển giao diện chất lượng cao trên cả iOS và Android một cách nhanh chóng Framework này sử dụng mã nguồn có sẵn, hỗ trợ lập trình viên và tổ chức trong việc tạo ra ứng dụng hiệu quả.

Flutter hoàn toàn miễn phí và cũng là mã nguồn mở Đặc điểm nổi bật:

Tính năng Hot Reload cho phép phát triển nhanh chóng, hiển thị giao diện trong milliseconds và sử dụng các widget tùy chỉnh để xây dựng giao diện chỉ trong vài phút Ngoài ra, Hot Reload còn giúp tiết kiệm thời gian khi thêm tính năng và sửa lỗi mà không cần qua máy ảo hay thiết bị Android hoặc iOS.

Flutter offers an expressive and flexible UI, featuring numerous components that enable the creation of visually stunning interfaces in both Material Design and Cupertino styles It supports a variety of motion APIs and smooth scrolling, enhancing the overall user experience.

Flutter widgets leverage platform-specific features such as scrolling, navigation, icons, and fonts to deliver optimal native performance for both iOS and Android devices.

getX [2]

getX là một thư viện Flutter, cung cấp công cụ quản lý trạng thái và dependency injection Ưu điểm:

BLoC pattern là một phương pháp quản lý trạng thái hiệu quả và an toàn, nhưng việc triển khai có thể phức tạp và tốn thời gian Điều này có thể gây khó khăn trong việc xử lý và tiếp cận, đặc biệt đối với những người mới bắt đầu.

MobX là một thư viện tuyệt vời và dễ sử dụng hơn BLoC, nhưng nó lại phụ thuộc nhiều vào việc sinh mã, điều này có thể gây khó khăn cho người dùng và làm phình to phạm vi của dự án.

Provider là một phương pháp quản lý trạng thái cơ bản và hiệu quả, đặc biệt hữu ích cho những người mới bắt đầu Tuy nhiên, do sử dụng InheritedWidget, Provider chỉ hoạt động trong cây widget, dẫn đến một số trường hợp không thể xử lý hiệu quả.

Tiếp theo là những ưu điểm của Get - State manager:

• Chỉ update những widget cần thiết

• Sử dụng ít bộ nhớ hơn so với các kiểu quản lý state khác

• Quên đi StatefulWidget Với Get các bạn không phải suy nghĩ sử dụng

StatefulWidget hay StateLessWidget nữa Bây giờ bạn chỉ việc một component duy nhất là GetWidget

Organizing the project structure will be exceptionally clear, with the code logic completely separated from the UI I will demonstrate the project structure in the final article of the series.

• Update widgets without spending ram for that

• Tối ưu hoá bộ nhớ, bạn sẽ không phải lo lắng việc Out Memory nữa , Get sẽ tự động thu dọn những component không cần thiết

Firebase – Cloud Firestore [3]

Firebase là nền tảng phát triển ứng dụng di động và web, hoạt động trên nền tảng cloud với các API mạnh mẽ, không yêu cầu backend và server Nó cung cấp cơ sở dữ liệu sẵn có, giúp lập trình viên code nhanh chóng và thuận tiện.

Firebase cung cấp một cách dễ dàng để tạo tài khoản Google, giúp người dùng nhanh chóng đăng ký Nền tảng này miễn phí cho nhiều tính năng cơ bản, nhưng yêu cầu người dùng trả phí cho các tính năng nâng cao.

Sử dụng Firebase với tốc độ cao giúp các nhà phát triển ứng dụng tiết kiệm thời gian thiết kế Các lập trình viên có quyền truy cập vào server và host, từ đó quản lý hiệu quả thời gian lập trình và hoàn tất công việc cụ thể.

Nền tảng đa dịch vụ này cung cấp đầy đủ các dịch vụ hỗ trợ cho việc phát triển web, giúp người tham gia dễ dàng lập trình và triển khai các giải pháp trực tuyến hiệu quả.

3 trình có thể tùy cho database firebase hoặc realtime theo công việc và sở thích của mình

Firebase, một thành phần quan trọng của Google, đã được công ty mua lại và phát triển mạnh mẽ Nhờ vào sự đầu tư này, Google đã tối ưu hóa các tính năng của Firebase, mang đến những dịch vụ hữu ích cho người dùng.

Phát triển giao diện người dùng tốt là một trong những ưu điểm nổi bật của nền tảng Firebase, cho phép tập trung vào trải nghiệm người dùng Nền tảng này cung cấp một kho backend đa dạng với nhiều giao diện phong phú, giúp người dùng dễ dàng lựa chọn theo nhu cầu của mình.

Firebase không cần máy chủ để hoạt động, giúp tối ưu hóa hiệu suất làm việc và mở rộng cơ sở dữ liệu một cách hiệu quả.

Chức năng học máy là một yếu tố quan trọng và hữu ích cho các lập trình viên mới làm quen với nền tảng, giúp tối ưu hóa quá trình phát triển ứng dụng trong công việc hàng ngày của họ.

Firebase hỗ trợ tạo các chỉ mục giúp nâng cao thứ hạng ứng dụng trên Google, từ đó tăng lượng traffic Đây được xem là một phương pháp hiệu quả giúp người dùng dễ dàng tiếp cận sản phẩm hơn.

Firebase không chỉ là một công cụ phát triển mạnh mẽ mà còn có chức năng theo dõi hệ thống và phát hiện lỗi Nhờ khả năng này, Firebase giúp người dùng nhận diện các vấn đề trong ứng dụng và đưa ra giải pháp hiệu quả để khắc phục.

• Sao lưu dữ liệu: Firebase sẽ tiến hành sao lưu thường xuyên tất cả dữ liệu, đảm bảo tính có sẵn khi Dev sử dụng

• Không phải tất cả các dịch vụ firebase đều miễn phí, mức phí của nó cũng khá đắt và không ổn định

• Vì firebase không phải là mã nguồn mở cho nên không có quyền truy cập mã nguồn

• Firebase chỉ được cho phép hoạt động ở một vài quốc gia

• Firebase chỉ chạy trên Google cloud và không cung cấp API GraphQL

• Thời gian truy vấn của firebase chậm với kích thước tài liệu lớn.

Phân tích thiết kế hệ thống

Mô tả yêu cầu

Bảng 3-1 Yêu cầu chức năng

Nhóm chức năng Chức năng Mô tả

CHUNG Đăng ký tài khoản qua email Khách hàng đăng ký tài khoản bằng email để sử dụng ứng dụng Đăng nhập tài khoản qua Google email

Khách hàng đăng nhập bằng tài khoản Google để sử dụng ứng dụng

Quên mật khẩu Khách hàng thay đổi mật khẩu thông qua email đã đăng ký Đăng xuất Khách hàng đăng xuất khỏi tài khoản sử dụng

CHÍNH Đo chỉ số TDEE Ứng sẽ dựa trên các thông tin khách hàng cung cấp để đưa ra các chỉ số dinh dưỡng cho khách hàng

Khách hàng có thể tìm kiếm món ăn để bổ sung vào nhật ký bữa ăn của mình Họ có khả năng xem thông tin chi tiết về các món ăn, từ đó dễ dàng quyết định món nào phù hợp Sau khi chọn lựa, khách hàng có thể thêm món ăn mong muốn vào nhật ký bữa ăn Ngoài ra, họ cũng có tùy chọn xóa món ăn khỏi nhật ký nếu cần thiết.

Xóa món ăn khỏi nhật ký bữa ăn

Tra cứu món ăn bằng Barcode Khách hàng quét mã

Ứng dụng giúp khách hàng theo dõi tiến độ dinh dưỡng hàng ngày thông qua việc quét mã vạch để thêm món ăn Khách hàng có thể cập nhật các chỉ số cơ thể và mục tiêu cá nhân, đồng thời thêm các bài tập vào nhật ký để quản lý sức khỏe hiệu quả.

Xóa các bài tập Khách hàng xóa các bài tập khỏi nhật ký

Gửi nhận tin nhắn Khách hàng gửi nhận tin nhắn với chuyên gia dinh dưỡng

Mô hình Use-case

Hình 3-1 Use case tổng quát

Hình 3-2 Use case Đăng nhập

Hình 3-3 Use case Đăng xuất

3.2.1.4 Use case Quản lý nhật ký món ăn

Hình 3-4 Use case Quản lý nhật ký món ăn

3.2.1.5 Use case Quản lý bài tập

Hình 3-5 Use case Quản lý bài tập

Bảng 3-2 Danh sách các Actors

1 User Thực hiện các chức năng xây dựng thực đơn cho mình, quản lý và theo dõi sức khỏe, chat với chuyên gia dinh dưỡng

2 Chuyên gia dinh dưỡng Thực hiện các chức năng xây dựng thực đơn cho mình, quản lý và theo dõi sức khỏe, chat với người dùng

Use Case Name Use Case Đăng nhập

Description Là người dùng, tôi muốn đăng nhập vào để sử dụng chức năng ứng dụng

Actor(s) User, chuyên gia dinh dưỡng

Trigger Người dùng muốn đăng nhập vào ứng dụng

Pre Condition(s) Tài khoản người dùng đã được tạo sẵn

Tài khoản người dùng đã được phân quyền Thiết bị của người dùng có kết nối internet khi thực hiện đăng nhập

Post Condition(s) Người dùng đăng nhập ứng dụng thành công

Hệ thống ghi nhận người dùng đăng nhập thành công Basic Flow 1 Người dùng truy cập ứng dụng

2 Người dùng chọn phương thức đăng nhập bằng tải khoản

3.Người dùng nhập tài khoản và đă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 ứng dụng

5 Hệ thống ghi nhận hoạt động đăng nhập thành công Alternative Flow 2a Người dùng chọn phương thức đăng nhập bằng

Google 2a.1 Hệ thống chuyển sang màn hình đăng nhập của Google

3a Người dùng nhập tài khoản Google và chọn lệnh đăng nhập

4a Google xác thực thông tin đăng nhập thành công và cho phép người dùng đăng nhập ứng dụng Use Case tiếp tục bước 5

Exception Flow 4b 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 4b.1 Người dụng thoát úng dụng Use Case dừng lại

4b.2 Người dụng chọn lấy lại mật khẩu Use Case tiếp tục Use Case UC-1.2 Non-Funtional

3.2.3.2 Use case Quên mật khẩu

Use Case Name Use Case Quên mật khẩu

Description Là người dùng, tôi muốn lấy lại mật khẩu tài khoản

Trigger Người dùng bấm vào mục quên mật khẩu

Pre Condition(s) Tài khoản người dùng đã được tạo sẵn

Tài khoản người dùng đã được phân quyền Thiết bị của người dùng có kết nối internet khi thực hiện quên mật khẩu

Post Condition(s) Người dùng lấy lại mật khẩu thành công

Hệ thống ghi nhận người dùng đổi mật khẩu thành công

Basic Flow 1 Người dùng truy cập ứng dụng

2 Người dùng bấm vào mục quên mật khẩu 3.Người dùng nhập tài khoản

4 Hệ thống yêu cầu nhập mã OTP để đổi mật khẩu 5.Người dùng nhập đúng mã OTP để đổi mật khẩu mới

6 Hệ thống xác nhận mã OTP để đổi mật khẩu mới 7.Hệ thống hiển thị màn hình đổi mật khẩu

8 Người dùng nhập mật khẩu mới

9 Hệ thống hiển thị thông báo đổi mật khẩu thành công

Exception Flow 5a Người dùng nhập sai mã OTP

5a1 Hệ thống báo lỗi và hủy bỏ Use Case dừng lại

Use Case Name Use Case Đăng xuất

Description Là người dùng, tôi muốn đăng xuất để sử dụng tài khoản khác

Trigger Người dùng bấm vào nút đăng xuất ứng dụng

Pre Condition(s) Tài khoản người dùng đã được đăng nhập

Thiết bị của người dùng có kết nối internet khi thực hiện đăng nhập

Post Condition(s) Người dùng đăng xuất ứng dụng thành công

Hệ thống ghi nhận người dùng đăng xuất thành công Basic Flow 1 Người dùng truy cập ứng dụng

2 Người dùng ấn nút đăng xuất tải khoản

3 Hệ thống hiển thị thông báo xác nhận

5 Hệ thống ghi nhận hoạt động đăng xuất thành công

6 Hệ thống chuyển người dùng tới màn hình đăng nhập

Exception Flow 4a Người dùng từ chối

4b.1 Hệ thống ghi nhận và tắt thông báo Use Case dừng lại

3.2.3.4 Use Case thêm món ăn

Use Case Name Use Case thêm món ăn

Description Là người dùng, tôi muốn thêm món ăn

Trigger Người dùng bấm vào button thêm món ăn

Pre Condition(s) Người dùng đã đăng nhập vào hệ thống

Thiết bị của người dùng có kết nối internet khi thực hiện chức năng

Post Condition(s) Người dùng thêm món ăn thành công

Hệ thống ghi nhận món ăn đã được thêm vào Basic Flow 1 Người dùng bấm vào button thêm món ăn

2 Người dùng tìm kiếm món ăn

3 Hệ thống hiển thị thông tin món ăn

4 Người dùng chọn món ăn mình muốn thêm vào

5 Hệ thống ghi nhận món ăn đã được thêm vào

6 Hệ thống hiển thị món ăn trên nhật ký món ăn của người dùng

Alternative Flow 2a Người dùng tìm kiếm món ăn bằng scan bar code

2a.1 Người dùng mở camera và scan thức ăn Use Case tiếp tục bước 3

2b Người dùng tìm kiếm món ăn theo thực phẩm 2b.1 Người dùng nhập loại thực phẩm và số lượng của thực phẩm

Use Case tiếp tục bước 3 Exception Flow 2c Người dùng không tìm kiếm được món ăn

Use Case kết thúc Non-Funtional

3.2.3.5 Use case Xóa món ăn

Use Case Name Use Case xóa món ăn

Description Là người dùng, tôi muốn xóa món ăn

Trigger Người dùng kéo ngang món ăn để xóa

Post Condition(s) Người dùng xóa món ăn thành công

Hệ thống ghi nhận món ăn đã được xóa đi Basic Flow 1 Người dùng kéo ngang món ăn

2 Hệ thống ghi nhận món ăn đã được xóa

3 Hệ thống không hiển thị món ăn trên nhật ký món ăn của người dùng

3.2.3.6 Use Case Thêm bài tập

Use Case Name Use Case thêm bài tập

Description Là người dùng, tôi muốn thêm bài tập

Trigger Người dùng bấm vào button thêm bài tập

Post Condition(s) Người dùng thêm món ăn thành công

Hệ thống ghi nhận món ăn đã được thêm vào Basic Flow 1 Người dùng bấm vào button thêm bài tập

2 Người dùng tìm kiếm bài tập

3 Hệ thống hiển thị thông tin bài tập

4 Người dùng chọn bài tập mình muốn thêm vào

5 Hệ thống ghi nhận bài tập đã được thêm vào

6 Hệ thống hiển thị bài tập trên nhật ký bài tập của người dùng

Exception Flow 2a Người dùng không tìm kiếm được bài tập

Use Case kết thúc Non-Funtional

3.2.3.7 Use case Xóa bài tập

Use Case Name Use Case xóa bài tập

Description Là người dùng, tôi muốn xóa bài tập

Trigger Người dùng bấm vào nút xóa bài tập

Post Condition(s) Người dùng xóa bài tập thành công

Hệ thống ghi nhận bài tập đã được xóa đi Basic Flow 1 Người dùng bấm xóa bài tập

2 Hệ thống ghi nhận bài tập đã được xóa

3 Hệ thống không hiển thị bài tập trên nhật ký bài tập của người dùng

Use Case Name Use Case chat

Description Là người dùng, tôi muốn chat với chuyên gia dinh dưỡng

Trigger Người dùng bấm vào mục chat

Post Condition(s) Người dùng gửi tin nhắn thành công Đối tác nhận tin nhắn thành công

Hệ thống ghi nhận tin nhắn đã được gửi Basic Flow 1 Người dùng chọn chuyên gia dinh dưỡng để chat

2 Người dùng gửi tin nhắn

3 Hệ thống ghi nhận tin nhắn đã được gửi

4 Chuyên gia dinh dưỡng nhận tin nhắn Alternative Flow None

Mô hình hoạt động

Hình 3-7 Mô hình hoạt động Đăng nhập

Hình 3-8 Mô hình hoạt động Quên mật khẩu

Hình 3-9 Mô hình hoạt động Đăng xuất

Hình 3-10 Mô hình hoạt động Chat

Hình 3-11 Mô hình hoạt động Tìm Kiếm món ăn

Hình 3-12 Mô hình hoạt động Thêm món ăn

Hình 3-13 Mô hình Hoạt động xóa món ăn

3.3.8 Thêm bài tập thể dục

Hình 3-14 Mô hình hoạt động Thêm bài tập thể dục

3.3.9 Xóa bài tập thể dục

Hình 3-15 Mô hình hoạt động Xóa bài tập thể dục

3.3.10 Quản lý nhật ký món ăn

Hình 3-16 Mô hình hoạt động Quản lý nhật ký món ăn

Mô hình tuần tự

Hình 3-17 Mô hình tuần tự Đăng nhập

Hình 3-18 Mô hình tuần tự Quên mật khẩu

Hình 3-19 Mô hình tuần tự Chat

Hình 3-20 Mô hình tuần tự tìm kiếm món ăn

Hình 3-21 Mô hình tuần tự thêm món ăn

Hình 3-22 Mô hình tuần tự xóa món ăn

3.4.7 Thêm bài tập thể dục

Hình 3-23 Mô hình tuần tự thêm bài tập thể dục

3.4.8 Xóa bài tập thể dục

Hình 3-24 Mô hình tuần tự xóa bài tập thể dục

Kiến trúc phần mềm

Hình 3-25 Kiến trúc phần mềm

Mô hình MVVM (Model-View-ViewModel) trong Flutter là một kiến trúc phân lớp giúp tách biệt logic xử lý dữ liệu (ViewModel) và giao diện người dùng (View), đồng thời duy trì mối liên kết với dữ liệu (Model) Các thành phần chính trong mô hình MVVM bao gồm: Model, nơi lưu trữ dữ liệu; View, phần giao diện người dùng; và ViewModel, nơi xử lý logic và kết nối giữa Model và View.

• Đại diện cho dữ liệu của ứng dụng, bao gồm các lớp, cấu trúc hoặc đối tượng dùng để lưu trữ và quản lý dữ liệu

• Model không có sự phụ thuộc vào ViewModel hoặc View

• Đại diện cho giao diện người dùng (UI) của ứng dụng

• Nhận thông tin từ ViewModel và hiển thị dữ liệu cho người dùng

• Phản hồi các sự kiện người dùng (nhập liệu, nhấp chuột, v.v.) và chuyển tới ViewModel để xử lý

• Chịu trách nhiệm xử lý logic của ứng dụng và tương tác với Model

• Nhận dữ liệu từ Model và chuẩn bị dữ liệu cho View để hiển thị

• Theo dõi và xử lý sự kiện từ View, thường thông qua các lớp hỗ trợ như

"GetX" để quản lý trạng thái ứng dụng

Thiết kế cơ sở dữ liệu

Hình 3-26 Sơ đồ thiết kế cho collection lưu trữ các món ăn

Hình 3-27 Sơ đồ thiết kế cho collection lưu trữ thông tin dữ liệu người dùng

Xây dựng ứng dụng

Màn hình Giới thiệu

Hình 4-1 Màn hình Giới thiệu

Bảng 4-1 Mô tả cách sử dụng Màn hình Giới thiệu

STT Biến cố Xử lý

1 Chuyển trang Ấn nút để chuyển trang

Màn hình Chọn mục tiêu

Hình 4-2 Màn hình Chọn mục tiêu

Bảng 4-2 Mô tả cách sử dụng màn hình Chọn mục tiêu

1 Stay Healthy Lưu trạng thái Stay Healthy

2 Lost Weight Lưu trạng thái Lose Weight

3 Gain Weight Lưu trạng thái Gain Weight

4 Nút bấm tiếp tục Chuyển tới trang tiếp theo

5 Nút bấm quay lại Chuyển tới trang trước

Màn hình Chọn giới tính

Hình 4-3 Màn hình Chọn giới tính

Bảng 4-3 Mô tả cách sử dụng màn hình Chọn giới tính

1 Male Lưu giới tính nam và chuyển trang tiếp theo

2 Female Lưu giới tính nữ và chuyển trang tiếp theo

Màn hình Nhập tuổi

Hình 4-4 Màn hình Nhập tuổi

Bảng 4-4 Mô tả cách sử dụng màn hình Nhập tuổi

Màn hình Chọn chiều cao

Hình 4-5 Màn hình Chọn chiều cao

Bảng 4-5 Mô tả cách sử dụng màn hình Chọn chiều cao

1 Kéo chọn chiều cao Lưu chiều cao

Màn hình Chọn cân nặng hiện tại

Hình 4-6 Màn hình Chọn cân nặng hiện tại

Bảng 4-6 Mô tả cách sử dụng màn hình Chọn cân nặng

1 Kéo chọn cân nặng hiện tại Lưu cân nặng hiện tại

Màn hình Chọn mục tiêu cân nặng

Hình 4-7 Màn hình Chọn mục tiêu cân nặng

Bảng 4-7 Mô tả cách sử dụng màn hình Chọn mục tiêu cân nặng

1 Kéo chọn cân nặng mục tiêu Lưu cân nặng mục tiêu

Màn hình Chọn tần suất hoạt động

Hình 4-8 Màn hình Chọn tần suất hoạt động

Bảng 4-8 Mô tả cách sử dụng Màn hình Chọn tần suất hoạt động

1 Not very active Lưu trạng thái ít not very active

2 Moderately active Lưu trang thái moderately active

3 Active Lưu trạng thái active

4 Very active Lưu trạng thái very active

Màn hình Đăng nhập

Hình 4-9 Màn hình Đăng nhập

Bảng 4-9 Mô tả cách sử dụng Màn hình Đăng nhập

STT Biến cổ Xử lý

1 User Email Nhập thông tin email

2 Password Nhập thông tin mật khẩu

3 Forgot Password Chuyển tới màn hình quên mật khẩu

5 Sign In with Google Đăng nhập với tài khoản Google

Màn hình đăng ký

Hình 4-10 Màn hình Đăng ký

Bảng 4-10 Mô tả cách sử dụng Màn hình Đăng ký

1 Enter your email Nhập email đăng ký

2 Enter your password Nhập mật khẩu đăng ký

3 Repeat your password Nhập lại mật khẩu đăng ký

5 Sign In Quay về màn hình đăng nhập

Màn hình Trang chủ

Hình 4-11 Màn hình Trang chủ

Bảng 4-11 Mô tả cách sử dụng màn hình Trang chủ

1 Thêm lượng nước Mở Dialog Thêm nước

2 Cập nhật cân nặng Mở Dialog Cập nhật cân nặng

Màn hình Cập nhật cân nặng

Hình 4-12 Màn hình Cập nhật cân nặng

Bảng 4-12 Mô tả màn hình cách sử dụng Màn hình Cập nhật cân nặng

1 Thay đổi cân nặng Thay đổi cân nặng theo số đo của thước

2 Xác nhận Cập nhật cân nặng

3 Hủy bỏ Hủy bỏ cập nhật

Màn hình Thêm lượng nước trong ngày

Hình 4-13 Màn hình Thêm lượng nước

Bảng 4-13 Mô tả cách sử dụng Màn hình Thêm lượng nước

1 Thay đổi lượng nước Thay đổi lượng nước theo mong muốn

2 Xác nhận Cập nhật thêm lượng nước

3 Hủy bỏ Hủy bỏ cập nhật

Màn hình Nhật ký

Hình 4-14 Màn hình Nhật ký

Bảng 4-14 Mô tả cách sử dụng Màn hình Nhật ký

1 Thay đổi ngày Hiển thị danh sách món ăn theo ngày được chọn

2 Thêm món ăn theo buổi Chuyển sang Màn hình thêm món ăn

3 Xóa món ăn Hủy bỏ cập nhật

Màn hình Các chức năng chính

Hình 4-15 Màn hình Các chức năng chính

Bảng 4-15 Mô tả cách sử dụng Màn hình Các chức năng chính

1 Add Food Chuyển sang Màn hình thêm món ăn

2 Scan bar-code Chuyển san Màn hình Scan bar-code

3 Add Exercise Chuyển sang Màn hình thêm bài tập

Màn hình Lối tắt thêm món ăn

Hình 4-16 Màn hình Lối tắt thêm món ăn

Bảng 4-16 Mô tả cách sử dụng Màn hình Lối tắt thêm món ăn

1 Finding Food Chuyển sang Tab tìm kiếm món ăn

2 Quick shortcut Chuyển sang Tab Lối tắt thêm món ăn

3 Untracked Chuyển sang Tab Untracked Calories

4 Thông tin món ăn Nhập số lượng, tên món ăn

5 Nhập thức ăn Truy xuất theo yêu cầu

6 Log Food Log thức ăn vào Nhật ký

7 Chọn các buổi ăn khác List ra các buổi ăn như: Breakfast,

8 Chọn định lượng List ra các định lượng như: lbs, kg, bowl, none

Màn hình Thêm món ăn không định lượng

Hình 4-17 Màn hình Thêm món ăn không định lượng

Bảng 4-17 Mô tả cách sử dụng Màn hình Thêm món ăn không định lượng

4 Thông tin món ăn Nhập mô tả tên món ăn

5 Nhập thức ăn Chọn thêm món ăn

6 Chọn lượng calories Lựa chọn calories phù hợp với ước lượng

7 Confirm Log món ăn vào Nhật ký

Màn hình Tìm kiếm món ăn

Hình 4-18 Màn hình Tìm kiếm món ăn

Bảng 4-18 Mô tả cách sử dụng Màn hình Tìm kiếm món ăn

4 Log Food Log thức ăn vào Nhật ký

5 Chọn các buổi ăn khác List ra các buổi ăn như: Breakfast,

6 Xóa món ăn Vuốt ngang món ăn để Xóa món ăn

7 Tìm kiếm món ăn Chuyển sang Màn hình tìm kiếm món ăn

Màn hình Gợi ý món ăn

Hình 4-19 Màn hình Gợi ý món ăn

Bảng 4-19 Mô tả cách sử dụng màn hình Gợi ý món ăn

1 Back Chuyển sang Màn hình trước đó

2 Delete Xóa input đã nhập

3 Input text Đề ra các gợi ý món ăn

4 Chọn món ăn gợi ý Hiển thị danh sách các món ăn

5 Enter món ăn tìm kiếm Hiển thị danh sách các món ăn

Màn hình Kết quả tìm kiếm món ăn

Hình 4-20 Màn hình Kết quả tìm kiếm món ăn

Bảng 4-20 Mô tả cách sử dụng Màn hình Kết quả tìm kiếm món ăn

2 Delete Xóa input đã nhập

3 Input text Đề ra các gợi ý món ăn

4 Chọn món ăn Chuyển sang Màn hình Chi tiết món ăn

Màn hình Chi tiết món ăn

Hình 4-21 Màn hình chi tiết món ăn

Bảng 4-21 Mô tả cách sử dụng Màn hình Chi tiết món ăn

2 Log Food Chuyển sang màn hình chọn định lượng

Màn hình Chọn định lượng cho món ăn

Hình 4-22 Màn hình Chọn định lượng cho món ăn

Bảng 4-22 Mô tả cách sử dụng Màn hình Chọn định lượng cho món ăn

1 Cancel Chuyển sang Màn hình chi tiết món ăn

2 Chọn định lượng Lựa chọn định lượng theo mong muốn

3 Confirm Xác nhận thêm món ăn và back về Màn hình Tìm kiếm món ăn

Màn hình Thêm bài tập

Hình 4-23 Màn hình Thêm bài tập Bảng 4-23 Mô tả cách sử dụng Màn hình Thêm bài tập

2 Log Exercise Chuyển sang màn hình chọn thời gian

3 Add Exercise Chuyển sang Tab Add Exercise

4 Untracked exercise Chuyển sang Tab Untracked Exercise

5 Thông tin bài tập Điền thông tin bài tập

Màn hình Chọn thời lượng bài tập

Hình 4-24 Màn hình Chọn thời lượng bài tập

Bảng 4-24 Mô tả cách sử dụng Màn hình Chọn thời lượng bài tập

1 Cancel Chuyển sang Màn hình thêm bài tập

2 Chọn thời lượng Lựa chọn thời lượng theo mong muốn

3 Confirm Xác nhận thêm bài tập và back về Màn hình thêm bài tập

Màn hình Tra cứu món ăn bằng barcode

Hình 4-25 Màn hình Tra cứu món ăn bằng Barcode

Bảng 4-25 Mô tả cách sử dụng màn hình Tra cứu món ăn bằng Barcode

1 Cancel Back về màn hình trước đó

2 Chuyển đổi góc nhìn Đổi cam của điện thoại

3 Quét Bar-code Đưa camera tới mã barcode của món ăn

Màn hình Các liên hệ

Hình 4-26 Màn hình Các liên hệ

Bảng 4-26 Mô tả cách sử dụng màn hình Các liên hệ

1 Chọn người dùng Chuyển sang màn hình tin nhắn

Màn hình Chat

Bảng 4-27 Mô tả cách sử dụng Màn hình Chat

1 Back Back về Màn hình trước đó

2 Input message Hiển thị tin nhắn được nhập

3 Image loader Hiển thị hình ảnh trong kho để thêm vào

4 Send message Gửi đi tin nhắn

Tiêu đề	Đồ án xây dựng ứng dụng di động hỗ trợ dinh dưỡng với chat real time
Tác giả	Trần Thành Nhân, Phạm Minh Nhật
Người hướng dẫn	TS. Đỗ Thị Thanh Tuyền
Trường học	Trường Đại Học Công Nghệ Thông Tin, Đại học Quốc Gia TP. Hồ Chí Minh
Chuyên ngành	Khoa Công Nghệ Phần Mềm
Thể loại	Đồ án
Năm xuất bản	2023
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	72
Dung lượng	2,96 MB