ĐỒ án xây DỰNG ỨNG DỤNG CHĂM sóc sức KHỎE EM bé với FLUTTER

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN I ĐỀ TÀI: “XÂY DỰNG ỨNG DỤNG CHĂM SÓC SỨC KHỎE EM BÉ VỚI FLUTTER” Giảng viên hướng dẫn: Ths Thái Thụy Hàn Uyển Sinh viên thực hiện: Nguyễn Minh Thắng 18521396 Bùi Trọng Khánh Duy 18520654 Tp Hồ Chí Minh, tháng 06 năm 2021 LỜI CẢM ƠN Nhóm em xin chân thành cảm ơn hướng dẫn tận tình Thái Thụy Hàn Uyển - giảng viên hướng dẫn môn Đồ án hỗ trợ cho nhóm q trình nghiên cứu để nhóm hồn thành đề tài Vì kiế n thức chúng em cịn hạ n hẹp nên khơng thể tránh khỏi thiế u sót quá trình thực đồ á n Vì nhóm chúng em ln mong đợi nhận ý kiế n đó ng gó p quý bá u từ phía giảng viên để qua đó có thể rút kinh nghiệm, tự sửa chữa, hoàn thiện thân tinh thần nghiêm túc, tự giác học hỏi Một lần nhóm chúng em xin chân thành cảm ơn Nhóm nghiên cứu NHẬN XÉT CỦA GIÁO VIÊN MỤC LỤC Contents MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Phương pháp nghiên cứu phát triển 1.3 Đối tượng hướng đến GIỚI THIỆU VỀ FLUTTER Error! Bookmark not defined 2.1 Ngôn ngữ Dart 2.1.1 Giới thiệu 2.1.2 Tại nên sử dụng Dart 2.2 Flutter Framework 2.2.1 Giới thiệu 2.2.2 Ưu điểm 2.2.3 Nhược điểm PHÁT TRIỂN ỨNG DỤNG CHĂM SÓC EM BÉ VỚI FLUTTER 3.1 Đặt vấn đề 3.2 Phạm vi ứng dụng 10 3.3 Mơ tả tốn 10 3.4 Cách chức 11 3.5 Phân tích thiết kế 11 3.5.1 Sơ đồ lớp mức phân tích 11 3.5.2 Sơ đồ UseCase đặc tả UseCase 12 3.5.3 Sơ đồ sở liệu 20 3.6 Giao diện ứng dụng 20 KẾT LUẬN 32 5.1 Kết thu 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 33 MỞ ĐẦU 1.1 Lý chọn đề tài Ở sống thành thị tại, có nhiều gia đình vừa phải làm vất vả ngày, vừa phải chăm lo cho họ Những bậc bố mẹ trẻ tuổi vấp phải nhiều khó khăn việc chăm sóc làm việc từ sáng đến chiều cơng ty, có buổi tối dành thời gian ỏi ngày để chăm sóc Vì nên quan tâm dinh dưỡng, thể chất người tiêm phòng cho hời hợt qua loa Sau thời gian tìm hiểu cân nhắc, nhóm thấy vấn đề mang tính thực tế thiết yếu, nên chọn vấn đề để nghiên cứu phát triển môn học 1.2 Phương pháp nghiên cứu phát triển Trước vào nghiên cứu chi tiết cụ thể, nhóm êm lên kế hoạch tìm hiểu nhiều ứng dụng có sẵn thị trường Các ứng dụng đa số mẻ, chủ yếu đáp ứng nhu cầu chăm sóc dinh dưỡng thể cho người từ tuổi trở lên Chính để tạo khác biệt đáp ứng nhu cầu chăm sóc cần thiết cho trẻ êm tuổi, nhóm chúng em nghiên cứu tạo ứng dụng làm điều Nhóm êm thực đề tài ngôn ngữ Dart với công nghệ ứng dụng Flutter Nhóm êm tuân thêo quy chuẩn phát triển phần mềm làm hoàn thiện phần mềm thông qua bước sau: Bước 1: Nhóm tiến hành khảo sát người dùng chi tiết, thu thập nhu cầu người dùng khó khăn người dùng chưa có phần mềm Bước 2: Nhóm nghiên cứu sản phẩm có sẵn thị trường xem có đáp ứng nhu cầu thực khơng, khó khăn phần mềm Bước 3: Nhóm phân tích đặc tả phần mềm theo mơ hình có sẵn phát triển phần mềm Vẽ UseCase cho chức WorkFlow để nhóm thực Bước 4: Nhóm thiết kế sở liệu chọn phương pháp thực sở liệu Bước 5: Thiết kế sơ chức phần mềm tương lai Bước 6: Nhóm lựa chọn ngơn ngữ lập trình để thực phần mềm nhóm thành sản phẩm Qua hội ý, họp hành, nhóm định chọn sử dụng ngôn ngữ dễ học tiện lợi Dart thông qua Cross platform Fluttêr để thực việc lập trình Bước 7: Nhóm thiết kế Giao diện cho ứng dụng ứng dụng hỗ trợ thiết kế figma Bước 8: Nhóm tiến hành cài đặt hồn thiện cho phần mềm Bước 9: Nhóm tiến hành sửa chữa lỗi nâng cấp số chức có phần mềm Bước 10: Nhóm hồn thành phần mềm tài liệu báo cáo 1.3 Đối tượng hướng đến Nhóm đối tượng chủ yếu phần mềm bậc phụ huynh có nhỏ tuổi, hay người chăm sóc trẻ nhỏ độ tuổi từ lúc sinh đến tuổi Những người chăm sóc trẻ nhỏ hay bậc phụ huynh thành thị, khơng có thời gian ghi nhớ dinh dưỡng cung cấp cho con, hay lịch sử tiên phịng Đối với đối tượng này, họ cần ứng dụng giúp họ ghi nhớ giúp đỡ họ việc chăm sóc Chính nên ứng dụng trợ thủ đắc lực giúp bậc bố mẹ kiểm sốt chăm sóc cho cái, làm chủ thời gian Thơng qua người sử dụng app ghi lại tồn phát triển để cung cấp cho bác sĩ bé có bị bệnh hay gặp phải vấn đề dinh dưỡng GIỚI THIỆU VỀ FLUTTER 2.1 Ngơn ngữ Dart 2.1.1 Giới thiệu • Là ngơn ngữ lập trình đơn giản, dễ hiểu dễ đến gần • Là ngơn ngữ lập trình sử dụng để build lên Flutter Framework • Nó xuất vào năm 2011, hướng tới việc tạo ứng dụng đa tảng – Website, mobile, desktop IoT • Phiên viết đăng 2.8 khác ổn định việc lập trình • Là ngơn ngữ tĩnh, thêo hướng đối tượng (OOP), functional programming lexical scoped • Nó kết hợp Java JavaScript nên học có tảng ngơn ngữ lúc đến gần dễ 2.1.2 Tại nên sử dụng Dart • Google muốn viết (phát triển) ngơn ngữ mà cải tiến Javascript giúp đỡ bí biên dịch Just In Time (JIT) Ahead Of Time (AOT): o Ahead Of Time (AOT): Với AOT trình biên chuyển dịch ngôn ngữ Dart thẳng sang Native Code giúp hiệu suất tối ưu có khả (tức chạy chương trình, biên dịch từ đầu đến cuối) o Just In Time (JIT): Còn với JIT cho phép hot reloading công việc, giúp phát triển mặt hàng nhanh tiện dụng (được hiểu việc debug ngôn ngữ khác debug hàm chạy hàm viết đến đâu biên dịch đến đấy) 2.2 Flutter Framework 2.2.1 Giới thiệu Fluttêr mobilê SDK Googlê tăng trưởng, giúp người sử dụng có khả tạo ứng dụng chạy iOS Android Là Crossflatform framêwork khác với Cross-flatform tai, Flutter không thơng qua bridge, mà chạy engine render riêng (viết C++) sử dụng Flutter framework (viết Dart) để giao tiếp với service Cả đóng gói ứng dụng thơng qua SDK có khả chạy đa tảng Kì vọng mà team phát triển Flutter nhắm đến chạy đa tảng, Flutter ngồi chạy mobile cịn có khả chạy web thông qua dự án mang tên Hummingbird, chạy thiết bị IoT desktop 2.2.2 Ưu điểm • Fast Dêvêlopmênt: Tíng Hot Rêload hoạt động millisêconds để thị giao diện tới bạn Dùng tập hợp widget có khả customizablê để tạo bố cụ giao diện vài phút Bên cạnh Hot Reload cịn hỗ trợ bạn thêm chức năng, fix bug tiết kiệm thời gian mà không phải thông qua máy ảo, máy android iOS • Expressive and Flexible UI: có khơng thành phần để tạo giao diện Flutter vô xinh xắn thêo cách điệu Material Design Cupertino, hỗ trợ nhiều APIs chuyển động, smooth scrolling… • Native Performance: Các widget fluter kết hợp khác biệt tảng chẳng hạn như scrolling, navigation, icons, font để bổ sung hiệu tốt tới iOS Android 2.2.3 Nhược điểm • Bộ render UI nhóm tăng trưởng gần viết lại, khơng liên quan tới UI có sẵn Framework native, dẫn đến memory sử dụng nhiều Thêm nữa, UI không chung với OS, mà phát triển riêng, có nghĩa phiên Flutter tạo áp dụng cho iOS iOS 8.x -> 12.x y chang nhau, tương tự với Android Tuy nhiên UI Android tất nhiên khác với iOS • Phải học thêm ngơn ngữ DART: lập trình viên biết DART ít, có nguy học xong DART dính liền ln với DART mảng tăng trưởng ứng dụng mobile Chứ không uyển chuyển JS hay Python có khả nhảy qua lại front, back hay AI… • Mơ hình liệu mới: bloc pattern, DART Streaming; quên với Rêdux làm tăng trưởng React Native, bạn thời gian để học thêm mơ hình liệu Flutter, khơng khó PHÁT TRIỂN ỨNG DỤNG CHĂM SĨC EM BÉ VỚI FLUTTER 3.1 Đặt vấn đề Ở sống thành thị tại, có nhiều gia đình vừa phải làm vất vả ngày, vừa phải chăm lo cho họ ngày Những bậc bố mẹ khó khăn việc chăm sóc làm việc từ sáng đến chiều cơng ty, có buổi tối dành thời gian ỏi ngày để chăm sóc Vi nên quan tâm dinh dưỡng, thể chất người tiêm phòng cho hời hợt qua loa Sau thời gian tìm hiểu cân nhắc, nhóm thấy vấn đề mang tính thực tế thiết yếu, nên chọn vấn đề để nghiên cứu phát triển môn học 3.2 Phạm vi ứng dụng Nhóm đối tượng chủ yếu phần mềm bậc phụ huynh có nhỏ tuổi, hay người chăm sóc trẻ nhỏ độ tuổi từ lúc sinh đến tuổi Những người chăm sóc trẻ nhỏ hay bậc phụ huynh thành thị, khơng có thời gian ghi nhớ dinh dưỡng cung cấp cho con, hay lịch sử tiên phịng Đối với đối tượng này, họ cần ứng dụng giúp họ ghi nhớ giúp đỡ họ việc chăm sóc Chính nên ứng dụng trợ thủ đắc lực giúp bậc bố mẹ kiểm sốt chăm sóc cho cái, làm chủ thời gian Thông qua người sử dụng app ghi lại tồn phát triển để cung cấp cho bác sĩ bé có bị bệnh hay gặp phải vấn đề dinh dưỡng 3.3 Mô tả tốn • u cầu chức năng: Phần mềm hiển thị đầy đủ nội dung tổng quan số dinh dưỡng số IBM bé Có thể lưu lại dinh dưỡng mà bé nhận vào tuần Lưu trữ lịch sử tiêm phòng bé Đưa gợi ý thực đơn cho bé hàng tuần • Yêu cầu phi chức năng: Phần mề m đá p ứng với kích cỡ hình thiế t bị di động phổ biển, giao diện trực quan, sinh động, thao 3.5.3 Sơ đồ sở liệu 3.6 Giao diện ứng dụng • Màn hình Đăng nhập - Đây hình sau người dùng mở ứng dụng Là trang đăng nhập, trang chia làm phần: o Phần dành cho người dùng có tài khoản ứng dụng Bao gồm têxtbox cho người dùng nhập tên tài khoản, bên têxtbox cho người dùng nhập mật tài khoản Mật có ràng buộc gồm số Sau nhập tên tài khoản mật khẩu, người dùng nhấn vào nút Login để đăng nhập vào ứng dụng tài khoản Bên có nút hỗ trợ cho người dùng quên mật cá nhân o Phần bên dành cho người dùng ứng dụng Ở đây, người dùng nhấn chọn đăng nhập tài khoản từ nguồn khác tài khoản Facebook tài khoản Google Bên nút chuyển qua Màn hình Đăng ký tài khoản ứng dụng • 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 chuyển tới hình Đăng ký tài khoản ứng dụng - Trang vào phasê Đăng ký tài khoản điền tên người dùng Tên dùng cho đăng nhập với tên đại diện cho profile người dùng Trang chia làm phần chính: o Thanh appbar có tên tiến trình tạo tài khoản Cùng với nút lùi hình trước (Màn hình Đăng nhập) o Phần bên gồm mơ tả cho người dùng tiến trình tạo tài khoản Ở hình têxtbox cho người dùng nhập tên tài khoản Ngay bên nút Nêxt để người dùng chuyển tiếp đến tiến trình - Trang tiếp thêo phasê Đăng ký tài khoản điền email sử dụng người dùng Những thơng tin quan trọng (ví dụ mật cũ) gửi êmail mà người dùng đăng ký Trang chia làm phần chính: o Thanh appbar có tên tiến trình tạo tài khoản Cùng với nút lùi hình trước o Phần bên gồm mơ tả cho người dùng tiến trình tạo tài khoản Ở hình têxtbox cho người dùng nhập email Ngay bên nút Nêxt để người dùng chuyển tiếp đến tiến trình - Trang tiếp thêo phasê Đăng ký tài khoản điền mật tài khoản người dùng Mật dùng để bảo mật tài khoản cho người dùng Có ràng buộc bao gồm số Ở gồm trạng thái trang miêu tả người dùng chưa nhập mật Trang chia làm phần chính: o Thanh appbar có tên tiến trình tạo tài khoản Cùng với nút lùi hình trước o Phần bên gồm mơ tả cho người dùng tiến trình tạo tài khoản Ở hình textbox cho việc nhập mật Textbox người dùng điền mật cá nhân Có nút hiển thị mật bên góc phải Textbox người dùng điền lại mật lần để tránh sai sót Chỉ mật trùng khớp với nhau, icon góc bên phải chuyển qua dấu chêck người dùng tiếp tục Ngay bên nút Nêxt để người dùng chuyển tiếp đến tiến trình - Trang cuối phasê Đăng ký tài khoản thông báo cho người dùng tiến trình tạo tài khoản kết thúc Trang yêu cầu xác nhận người dùng chấp nhận khoản ràng buộc bên cung cấp ứng dụng Trang chia làm phần chính: o Thanh appbar có tên tiến trình tạo tài khoản Cùng với nút lùi hình trước o Phần bên xác nhận người dùng chấp nhận khoản ràng buộc bên cung cấp ứng dụng Nhấn vào nút Sign Up chuyển hình đến Màn hình Trang chủ • Màn hình Trang chủ - Đây hình ứng dụng Ở hình chia thành phần: o Phần appbar ứng dụng Gồm tên chữ ứng dụng BabyCare Ở góc phải gồm nút chng thơng báo để chuyển sang Màn hình Thơng báo nút toggle lệnh sử dụng ứng dụng o Phần khung hiển thị Mẹo hữu ích cho người dùng kiến thức chăm trẻ Khung làm người dùng quay Màn hình Trang chủ o Kế đến phần hiển thị lời chào người dùng Hệ thống sử dụng tên tài khoản mà người dùng đặt từ trước o Sau danh sách lệnh ứng dụng Mỗi ô tương ứng cho nhánh chức lớn ứng dụng Gồm tên miêu tả chức bên phải hình biểu diễn chức Nhấn vào ô chuyển đến trang điều khiển thực chức o Bên bottom navigator dùng để thay đổi luân phiên mục lớn ứng dụng, bao gồm Trang chủ, Theo dõi sức khỏe cho em bé, Kế hoạch tiêm phòng Trang điều khiển tài khoản người dùng • Màn hình Tạo nhân vật em bé: o Ở hình có button nhân vật êm bé tạo o Nút dấu + có chức để chuyển đến phần tạo nhân vật em bé o Sau nhấn vào nút dấu cộng hình hiển thị cho ta chọn nhân vật em bé nam hay nữ, chọn giới tính xong nhấn next o Ở hình điều chỉnh ngày tháng năm sinh em bé, điều chỉnh chiều cao cân nặng em bé cách vuốt sang trái hay phải để tăng giảm số o Màn hình người dùng điều chỉnh lượng thức ăn mà êm bé ăn tuần qua Điều chỉnh cách vuốt màu xanh sang trái phải để thay đổi số Sau hoàn thành, người dùng nhấn vào nút Donê để chuyển trang chủ Hoặc người dùng nhấn vào nút Skip để bỏ qua bước • Màn hình Hiển thị thơng tin em bé: o Phía hình hình ảnh em bé, bao gồm nút để đổi hình cho nhân vật êm bé Phía hình tên nhân vật em bé o Phía tên em bé thông tin tuổi em bé thông tin thông báo sinh nhật hoạt động em bé o Phía nút để xem thông tin BMI Dinh dưỡng em bé (NI) o Khi cuộn từ hình xuống ta có hình này, bao gồm thơng tin chiều cao, cân nặng thông số dinh dưỡng em bé o Phía nút Update, điều chỉnh, cập nhật lại BMI Chỉ số dinh dưỡng em bé o Khi nhấn vào nút BMI phía hình nhấn vào nút update card Body Mass Index, ta chuyển sang hình update BMI cho em bé Ta điền thơng tin vào nhập liệu để updatê BMI cho bé Sau nhấn vào nút Nêxt để chuyển trang trước o Khi ta nhấn vào nút NI phía hình nhấn vào nút update card Nutrition Index, ta chuyển sang hình update Chỉ số Dinh dưỡng cho êm bé Người dùng điền khối lượng thức ăn tương ứng với dòng hiển thị loại thức ăn Sau nhấn vào nút Nêxt để chuyển trang trước • Màn hình gợi ý thực đơn: o Màn hình hiển thị tổng quan lượng thức ăn bạn cần cung cấp cho em bé tuần tới, dòng hiển thị thời gian bạn cập nhật lượng thức ăn cho nhân vật êm bé cách o Những panêl tương ứng chất dinh dưỡng mà em bé cần Trong panel gợi ý cho người dùng nên ăn loại thực phẩm để cung cấp chất dinh dưỡng panêl cho bé o Ở hình nút chuyển sang trang gồm Trang Hiển thị lịch sử thực đơn bé tuần trước Trang gợi ý cho thực đơn tuần o Màn hình bao gồm lịch sử bé cung cấp dinh dưỡng thông qua card, card tương ứng với ngày tuần trước o Màn hình This Week hiển thị cụ thể lượng thức ăn cần cung cấp cho bé qua ngày Card cho người dung biết cần cung cấp thức qua tuần cho bé Cịn card cho người dùng biết lượng thức ăn cần cung cấp cho em bé theo ngày KẾT LUẬN 5.1 Kết thu • Bước đầu vận dụng thành cơng Flutter vào phát triển đồ án mơn học • Sử dụng Firebasê làm sở liệu • Xác dịnh rõ bậc bố mẹ hay người chăm sóc trẻ đối tượng chủ yếu ứng dụng phần mềm • Những bước nhóm lên ý tưởng lập kế hoạch cho design pattern cách chi tiết từ phát triển phần mềm thêo hướng UI/UX đẹp mắt • Nhóm hồn gần hoàn chỉnh phần giao diện người dùng nhỏ back-end nhờ vào hướng dẫn cô 5.2 Khó khăn • Việc thực chức phía back-end khó để thiết lập kết nối với front-end • Bố cục code cịn thiếu kinh nghiệm xếp quản lý • Khó khăn việc tìm hiểu firêbasê để kết nối sở liệu 5.3 Phương hướng phát triển • • • • Hoàn thiện sở liệu chức back-end Cải thiện tốc độ xử lý, hướng tới trải nghiệm mượt mà Thêm tính gợi ý dinh dưỡng cụ thể loại thức ăn Thêm chức gợi ý địa điểm tiêm phòng kèm với dẫn đường đến địa điểm • Vận dụng công nghệ để mang lạ i nhiề u chức thiế t thực hữu ích TÀI LIỆU THAM KHẢO - https://pub.dev/ - https://github.com/flutter/samples - https://flutter.dev/docs - https://stackoverflow.com/ - https://youtube.com/ Link Source Code: https://github.com/Thangnguyen11/Baby-Care.git Video demo: https://drive.google.com/drive/folders/1JHGzPTVYhsuf6wAwed2ccsCt3hR YvWmw?usp=sharing ... tin em bé: o Phía hình hình ảnh em bé, bao gồm nút để đổi hình cho nhân vật êm bé Phía hình tên nhân vật em bé o Phía tên em bé thông tin tuổi em bé thông tin thông báo sinh nhật hoạt động em bé. .. PHÁT TRIỂN ỨNG DỤNG CHĂM SÓC EM BÉ VỚI FLUTTER 3.1 Đặt vấn đề 3.2 Phạm vi ứng dụng 10 3.3 Mô tả tốn 10 3.4 Cách chức 11 3.5 Phân tích thiết kế 11 3.5.1 Sơ đồ lớp mức phân tích... với đối tượng này, họ cần ứng dụng giúp họ ghi nhớ giúp đỡ họ việc chăm sóc Chính nên ứng dụng trợ thủ đắc lực giúp bậc bố mẹ kiểm sốt chăm sóc cho cái, làm chủ thời gian Thơng qua người sử dụng