PHÁT TRI ỂN ỨNG DỤNG CHĂM SÓC EM BÉ VỚI FLUTTER
Đặt vấn đề 9 3.2 Phạm vi ứng dụng 10 3.3 Mô tả bài toán 10 3.4 Cách chức năng chính 11 3.5 Phân tích thiế t kế 11 3.5.1 Sơ đồ lớp mức phân tích
Trong cuộc sống đô thị hiện nay, nhiều gia đình phải đối mặt với áp lực công việc hàng ngày và việc chăm sóc con cái Các bậc phụ huynh thường gặp khó khăn trong việc dành thời gian cho con, khi mà họ chỉ có thể chăm sóc con vào buổi tối sau một ngày làm việc dài Do đó, sự quan tâm đến dinh dưỡng, sức khỏe và tiêm phòng cho trẻ em thường bị bỏ qua hoặc thực hiện một cách qua loa.
Sau khi nghiên cứu và xem xét kỹ lưỡng, nhóm nhận thấy vấn đề này vừa thực tiễn vừa thiết yếu, vì vậy đã quyết định chọn nó làm đề tài nghiên cứu và phát triển cho môn học.
Phần mềm chủ yếu hướng đến các bậc phụ huynh có con nhỏ dưới 3 tuổi và những người chăm sóc trẻ từ lúc mới sinh đến 3 tuổi.
Các bậc phụ huynh và người chăm sóc trẻ nhỏ ở thành phố thường gặp khó khăn trong việc ghi nhớ dinh dưỡng và lịch sử tiêm phòng của con Để hỗ trợ họ trong việc chăm sóc trẻ, các ứng dụng giúp ghi nhớ thông tin dinh dưỡng và lịch tiêm phòng là rất cần thiết.
Ứng dụng này là một công cụ hữu ích cho các bậc phụ huynh trong việc quản lý sự chăm sóc con cái và tối ưu hóa thời gian Người dùng có thể ghi lại toàn bộ quá trình phát triển của trẻ, từ đó cung cấp thông tin quan trọng cho bác sĩ khi trẻ gặp vấn đề về sức khỏe hoặc dinh dưỡng.
Phần mềm cần hiển thị đầy đủ thông tin về chỉ số dinh dưỡng và chỉ số BMI của trẻ, cho phép lưu trữ dữ liệu dinh dưỡng trong một tuần Ngoài ra, phần mềm cũng cần lưu trữ lịch sử tiêm phòng của trẻ và cung cấp gợi ý thực đơn hàng tuần cho bé.
Phần mềm cần đáp ứng các yêu cầu phi chức năng như tương thích với kích thước màn hình của các thiết bị di động phổ biến, có giao diện trực quan và sinh động Thao tác sử dụng phải đơn giản, tốc độ phản hồi và đáp ứng đạt mức khá, từ đó tạo cảm giác thân thiện cho người dùng.
- Chức năng Tạo bản sao chỉ số em bé
- Chức năng Theo dõi chỉ số BMI của bé
- Chức năng Theo dõi, cập nhật liên tục chỉ số dinh dưỡng cho trẻ
- Chức năng Đưa ra gợi ý thực đơn hàng tuần
- Chức năng Thêo dõi chỉ số dinh dưỡng qua thức ăn của tuần trước
- Chức năng Cung cấp mẹo hữu ích về kiến thức chăm trẻ
3.5.1 Sơ đồ lớp mức phân tích
• Danh sách các lớp đối tượng và quan hệ
STT Tên lớp/quan hệ Loại Ý nghĩa/Ghi chú
1 Accounts Thông tin về người sử dụng app - tài khoản
2 Baby Thông tin về êm bé, 1 tài khoản có thể tạo nhiều êm bé Kết nối hầu hết với các bảng
3 BMI Thông tin về chiều cao, cân nặng và tuổi của êm bé
4 Nutrients Thông tin về dinh dưỡng gồm các chất cần thiết cho êm bé
5 Vaccination Thông tin về ngày tháng, loại vacxin đã tiêm cho êm bé
6 Nutrients of food Thông tin về chất dinh dưỡng của một món ăn, các chất dinh dưỡng này sẽ được cộng vào Nutriênts êm bé nếu êm bé ăn
3.5.2 Sơ đồ UseCase và đặc tả UseCase
STT Tên Actor Ý nghĩa/Ghi chú
Chủ tài khoản cá nhân đăng nhập vào ứng dụng, sử dụng được tất cả các chức năng
2 Danh sách các Use-case
STT Actor Tên Use-Case Ý nghĩa/Ghi chú
Người dùng Đăng ký Đăng ký tài khoản cá nhân
2 Đăng nhập Sử dụng tài khoản cá nhân đăng nhập vào ứng dụng
3 Đổi mật khẩu Thay đổi mật khẩu tài khoản cá nhân
4 Đặt lại mật khẩu Thay đổi mật khẩu thành mật khẩu mặc định
5 Thêo dõi chỉ số BMI Hiển thị chỉ số BMI tương đối của đối tượng theo dõi
6 Thêo dõi chỉ số dinh dưỡng Hiển thị chỉ số dinh dưỡng tương đối của đối tượng thêo dõi
7 Gợi ý thực đơn hàng tuần Đưa ra gợi ý thực đơn cho 7 ngày tiếp thêo cho đối tượng
8 Gợi ý thông tin tiêm phòng Đưa ra gợi ý các mũi tiêm phòng cần thiết
9 Gợi ý địa điểm tiêm phòng Đưa ra gợi ý các địa điểm tiêm phòng thêo mũi tiêm
10 Lịch sử tiêm phòng Lưu lại và hiển thị lịch sử tiêm phòng
3 Đặc tả Use-case a Đặc tả Use-casê Đăng ký
Tên chức năng Đăng ký tài khoản
Người dùng chính Người dùng Người dùng thứ
Tóm tắt Người dùng đăng ký tài khoản cá nhân sử dụng ứng dụng
Mục đích Lưu trữ thông tin cá nhân và sử dụng ứng dụng Điều kiện tiên quyết Điều kiện lúc sau
Hệ thống tự động đăng nhập nếu đăng ký thành công
Hệ thống hiển thị thông báo về lỗi gặp phải nếu đăng ký thất bại
1 Người dùng nhấn vào nút Đăng ký ở Màn hình Đăng nhập
2 Người dùng điền êmail đăng ký
3 Người dùng điền tên gọi
4 Người dùng điền mật khẩu
5 Người dùng điền mật khẩu lần 2
6 Người dùng nhấn vào nút Đăng ký
7 Hệ thống tự động đăng nhập và chuyển sang Màn hình Chính Dòng sự kiện khác
2.1 Với bất kỳ ô trống nào người dùng không điền 6.1 Người dùng nhấn vào nút Đăng ký
Trong trường hợp thông báo yêu cầu người dùng nhập đầy đủ thông tin, nếu người dùng nhập email, tên gọi hoặc mật khẩu không đúng định dạng, hệ thống sẽ cảnh báo và yêu cầu họ sửa đổi thông tin để đảm bảo tính chính xác và an toàn.
6.1 Người dùng nhấn vào nút Đăng ký
Khi người dùng nhấn vào nút Đăng ký, hệ thống sẽ tự động chuyển đổi nút này thành nút Đăng nhập, cho phép người dùng dễ dàng chuyển sang chế độ Đăng nhập Đồng thời, cần có thông báo cảnh báo yêu cầu người dùng nhập đúng địa chỉ email, tên gọi và mật khẩu để đảm bảo tính chính xác và bảo mật thông tin.
Chế độ Đăng nhập là mặc định trên Màn hình Đăng nhập, yêu cầu định dạng email theo chuẩn thông dụng Tên gọi không được chứa số và ký tự đặc biệt, trong khi mật khẩu phải có 6 số mà không bao gồm chữ cái và ký tự đặc biệt.
Tên chức năng Đăng nhập
Người dùng chính Người dùng Người dùng thứ
Tóm tắt Người dùng sử dụng tài khoản cá nhân đăng nhập vào ứng dụng
Để truy cập vào ứng dụng, người dùng cần sử dụng tài khoản cá nhân đã được đăng ký trước Sau khi đảm bảo tài khoản hợp lệ, hệ thống sẽ tiến hành đăng nhập và cho phép truy cập nếu quá trình đăng nhập thành công.
Hệ thống hiển thị thông báo về lỗi gặp phải nếu đăng nhập thất bại
1 Người dùng nhấn vào nút Đăng nhập ở Màn hình Đăng nhập
2 Người dùng điền êmail đã đăng ký
3 Người dùng điền mật khẩu đã đăng ký
4 Người dùng nhấn vào nút Đăng nhập
5 Hệ thống đăng nhập và chuyển sang Màn hình Chính
2.1 Với bất kỳ ô trống nào người dùng không điền 6.1 Người dùng nhấn vào nút Đăng nhập
Trong trường hợp người dùng không nhập đủ thông tin, hệ thống sẽ hiển thị thông báo yêu cầu Nếu người dùng nhập sai email hoặc mật khẩu, họ sẽ không thể đăng nhập Để tiếp tục, người dùng cần nhấn vào nút Đăng nhập sau khi đã điền thông tin chính xác.
Use case chuyển thực hiện thông báo: cảnh báo yêu cầu người dùng nhập đúng êmail/mật khẩu Điểm mở rộng
Trước khi nhấn nút Đăng nhập, người dùng nên chọn checkbox Tự động đăng nhập để tự động đăng nhập vào tài khoản trong những lần truy cập tiếp theo.
Chế độ Đăng nhập là chế độ mặc định khi mở ứng dụng trên Màn hình Đăng nhập, cho phép người dùng bỏ qua bước đầu tiên Người dùng có thể dễ dàng thay đổi mật khẩu theo hướng dẫn trong phần đặc tả Use-case.
Tên chức năng Thay đổi mật khẩu
Người dùng chính Người dùng Người dùng thứ
Tóm tắt Người dùng thay đổi mật khẩu của tài khoản đang sử dụng
Mục đích Thay đổi mật khẩu hiện tại của tài khoản đang sử dụng Điều kiện tiên quyết Người dùng đăng nhập thành công Điều kiện lúc sau
Hệ thống thay đổi mật khẩu của tài khoản và thông báo thành công nếu thay đổi mật khẩu thành công
Hệ thống hiển thị thông báo về lỗi gặp phải nếu thay đổi mật khẩu thất bại
1 Người dùng nhấn vào Biểu tượng người dùng ở Ngăn kéo bên phải ở Màn hình Chính
2 Người dùng nhấn vào nút Thay đổi mật khẩu
3 Người dùng điền mật khẩu cũ (mật khẩu hiện tại)
4 Người dùng điền mật khẩu mới
5 Người dùng điền mật khẩu mới lần 2
6 Người dùng nhấn vào nút Thay đổi
7 Hệ thống hiển thị thông báo xác nhận thay đổi mật khẩu
8 Người dùng nhấn vào nút Xác nhận
3.1 Với bất kỳ ô trống nào người dùng không điền 6.1 Người dùng nhấn vào nút Thay đổi
Trong trường hợp người dùng không nhập đầy đủ thông tin, hệ thống sẽ hiển thị thông báo cảnh báo yêu cầu người dùng cung cấp thông tin cần thiết Cụ thể, nếu người dùng nhập mật khẩu không đúng định dạng quy định, hệ thống sẽ thông báo rằng mật khẩu không hợp lệ và yêu cầu người dùng nhập lại mật khẩu theo đúng tiêu chuẩn.
6.1 Người dùng nhấn vào nút Thay đổi
Giao diện ứng d ụng 20 5 KẾT LUẬN
Màn hình đầu tiên khi mở ứng dụng là trang đăng nhập, được chia thành hai phần Phần trên dành cho người dùng đã có tài khoản, bao gồm textbox nhập tên tài khoản và textbox nhập mật khẩu (mật khẩu yêu cầu tối thiểu 6 ký tự) Sau khi nhập thông tin chính xác, người dùng nhấn nút "Login" để truy cập ứng dụng Ngoài ra, có nút hỗ trợ cho người dùng quên mật khẩu Phần dưới dành cho người dùng mới, cho phép đăng nhập qua tài khoản Facebook hoặc Google, và có nút chuyển đến màn hình đăng ký tài khoản.
• Màn hình Đăng ký tài khoản
- Khi nhấn vào nút Create New Account ở Màn hình Đăng nhập, người dùng được chuyển tới màn hình Đăng ký tài khoản của ứng dụng
Khi vào phasê Đăng ký tài khoản, người dùng sẽ điền tên của mình, được sử dụng để đăng nhập và đại diện cho profile Giao diện được chia thành hai phần chính: thanh appbar phía trên hiển thị tên tiến trình tạo tài khoản và nút quay lại màn hình trước (Màn hình Đăng nhập) Phần dưới cung cấp mô tả về tiến trình hiện tại, với một textbox ở giữa để nhập tên tài khoản và nút Nêxt ngay bên dưới để tiếp tục đến bước tiếp theo.
Trong bước đăng ký tài khoản, người dùng cần điền địa chỉ email của mình, nơi sẽ nhận các thông tin quan trọng như mật khẩu cũ Giao diện trang được chia thành hai phần chính: thanh appbar ở trên hiển thị tên tiến trình tạo tài khoản cùng với nút quay lại màn hình trước, và phần bên dưới cung cấp mô tả về tiến trình hiện tại Ở giữa màn hình có một ô nhập email và ngay bên dưới là nút "Nêxt" để người dùng tiếp tục đến bước tiếp theo.
Trong bước đăng ký tài khoản, người dùng cần nhập mật khẩu để bảo mật tài khoản, với yêu cầu tối thiểu là 6 ký tự Giao diện được chia thành hai phần: thanh appbar trên cùng hiển thị tên tiến trình tạo tài khoản và nút quay lại màn hình trước, trong khi phần dưới cung cấp hướng dẫn cho người dùng Ở giữa màn hình có hai ô nhập mật khẩu, ô đầu tiên để nhập mật khẩu cá nhân và có nút hiển thị mật khẩu bên phải Ô thứ hai yêu cầu người dùng nhập lại mật khẩu để đảm bảo chính xác Chỉ khi hai mật khẩu trùng khớp, biểu tượng bên phải mới chuyển thành dấu kiểm, cho phép người dùng nhấn nút "Nêxt" để tiếp tục tiến trình.
Trang cuối cùng trong phasê Đăng ký tài khoản thông báo cho người dùng rằng quá trình tạo tài khoản sắp kết thúc và yêu cầu xác nhận việc chấp nhận các khoản ràng buộc của bên cung cấp ứng dụng Giao diện được chia thành hai phần chính: thanh appbar ở trên hiển thị tên tiến trình tạo tài khoản hiện tại cùng với nút quay lại màn hình trước, và phần bên dưới yêu cầu người dùng xác nhận sự đồng ý với các điều khoản Khi nhấn nút Đăng ký, người dùng sẽ được chuyển đến Màn hình Trang chủ.
Màn hình chính của ứng dụng BabyCare được chia thành 5 phần chính Phần đầu tiên là thanh appbar với tên ứng dụng và nút thông báo ở góc phải Tiếp theo là khung hiển thị Mẹo hữu ích về chăm sóc trẻ, được làm mới khi quay về Màn hình Trang chủ Sau đó là lời chào người dùng, hiển thị tên tài khoản đã đăng ký Tiếp theo là danh sách các lệnh chính của ứng dụng, với mỗi ô tương ứng cho một chức năng lớn, cho phép người dùng truy cập nhanh chóng Cuối cùng, thanh bottom navigator giúp người dùng dễ dàng chuyển đổi giữa các mục lớn như Trang chủ, Theo dõi sức khỏe, Kế hoạch tiêm phòng và Trang điều khiển tài khoản.
Màn hình Tạo nhân vật em bé bao gồm các nút cho những nhân vật đã được tạo sẵn và nút dấu + để bắt đầu tạo một nhân vật mới Sau khi nhấn nút cộng, người dùng sẽ chọn giới tính của em bé, sau đó điều chỉnh ngày tháng năm sinh, chiều cao và cân nặng bằng cách vuốt trái hoặc phải Tiếp theo, người dùng điều chỉnh lượng thức ăn mà em bé tiêu thụ trong tuần trước bằng cách sử dụng các thanh màu xanh Cuối cùng, người dùng có thể nhấn nút Donê để trở về trang chủ hoặc chọn nút Skip để bỏ qua bước này.
Màn hình hiển thị thông tin em bé bao gồm hình ảnh và tên nhân vật của em bé, với nút đổi hình nền phía trên Dưới tên là thông tin về tuổi, sinh nhật và các hoạt động của em bé Ở dưới cùng có hai nút để xem thông tin BMI và Dinh dưỡng (NI) Khi cuộn màn hình, người dùng có thể xem chiều cao, cân nặng và các thông số dinh dưỡng của em bé, cùng với nút Update để điều chỉnh BMI hoặc chỉ số dinh dưỡng Nhấn vào nút BMI hoặc nút Update của card Body Mass Index sẽ chuyển đến màn hình cập nhật BMI, nơi người dùng có thể nhập thông tin và nhấn Nêxt để quay lại Tương tự, nhấn vào nút NI hoặc nút Update của card Nutrition Index sẽ dẫn đến màn hình cập nhật chỉ số dinh dưỡng, cho phép người dùng nhập khối lượng thức ăn và nhấn Nêxt để trở về trang trước.
Màn hình gợi ý thực đơn cung cấp tổng quan về lượng thức ăn cần thiết cho em bé trong tuần tới, hiển thị thời gian cập nhật gần nhất Các panel tương ứng với các loại chất dinh dưỡng thiết yếu cho bé, mỗi panel sẽ gợi ý các loại thực phẩm phù hợp để bổ sung dinh dưỡng Dưới cùng màn hình có hai nút để chuyển sang các trang khác.
Trang hiển thị lịch sử thực đơn của bé trong tuần trước và gợi ý thực đơn cho tuần này Màn hình sẽ bao gồm lịch sử dinh dưỡng của bé thông qua các thẻ card, mỗi thẻ tương ứng với một ngày trong tuần trước Màn hình "This Week" sẽ cụ thể hóa lượng thức ăn cần cung cấp cho bé theo từng ngày Card đầu tiên sẽ thông báo cho người dùng về các loại thức ăn cần cung cấp trong suốt tuần, trong khi các thẻ tiếp theo sẽ chỉ rõ lượng thức ăn cần thiết cho bé theo từng ngày.
Kết quả thu được 32 5.2 Khó khăn 33 5.3 Phương hướng phát triển 33 TÀI LIỆU THAM KHẢO
• Bước đầu vận dụng thành công được Flutter vào phát triển đồ án môn học
• Sử dụng Firebasê làm cơ sở dữ liệu
• Xác dịnh rõ được các bậc bố mẹ hay người chăm sóc trẻ là đối tượng chủ yếu của ứng dụng phần mềm
Nhóm đã bắt đầu bằng việc lên ý tưởng và lập kế hoạch chi tiết cho design pattern, từ đó phát triển phần mềm theo hướng UI/UX hấp dẫn và bắt mắt.
• Nhóm đã hoàn thanh gần như hoàn chỉnh phần giao diện người dùng và một nhỏ back-end nhờ vào sự hướng dẫn của cô
• Việc thực hiện các chức năng phía back-end rất khó để có thể thiết lập và kết nối với front-end
• Bố cục code còn thiếu kinh nghiệm sắp xếp và quản lý
• Khó khăn trong việc tìm hiểu firêbasê để kết nối cơ sở dữ liệu
• Hoàn thiện về cơ sở dữ liệu và các chức năng ở back-end
• Cải thiện tốc độ xử lý, hướng tới trải nghiệm mượt mà
• Thêm các tính năng gợi ý dinh dưỡng cụ thể về những loại thức ăn
• Thêm chức năng gợi ý địa điểm tiêm phòng kèm với dẫn đường đến các địa điểm
• Vận dụng các công nghệ mới để mang lại nhiều chức năng thiết thực và hữu ích hơn
- https://github.com/flutter/samples
Link Source Code: https://github.com/Thangnguyen11/Baby-Care.git