Đồ án xây dựng ứng dụng nhắc nhở lịch trình

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN - - BÁO CÁO ĐỒ ÁN XÂY DỰNG ỨNG DỤNG NHẮC NHỞ LỊCH TRÌNH Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực : Phạm Minh Việt Mã số sinh viên : 18520398 Lớp : SE122.M21 Bộ môn : Phát triển phần mềm Thành phố Hồ Chí Minh, tháng năm 2022 MỤC LỤC MỤC LỤC DANH MỤC BẢNG VÀ HÌNH ẢNH LỜI CẢM ƠN ĐỀ CƯƠNG CHI TIẾT CHƯƠNG – TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đối tượng nghiên cứu 1.2 Phạm vi nghiên cứu 1.3 Phương pháp nghiên cứu CHƯƠNG – CƠ SỞ LÝ THUYẾT 1.4 Tổng quan Expo 1.5 Tổng quan React.js Redux 1.5.1 React.js 1.5.2 Redux 10 1.6 Tổng quan React Native Async Storage 11 1.6.1 React Native 11 1.6.2 Async Storage 11 1.7 Tổng quan Expo Notifications 12 1.7.1 Các chức 12 CHƯƠNG – PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13 1.8 Mô tả yêu cầu 13 1.8.1 Yêu cầu chức 13 1.8.2 Yêu cầu phi chức 13 1.9 Kiến trúc hệ thống 14 1.9.1 Sơ đồ kiến trúc tổng quát 14 1.9.2 Mô tả kiến trúc Front-end 15 CHƯƠNG – HIỆN THỰC HỆ THỐNG 17 1.10 Thiết kế liệu 17 1.10.1 Danh sách đối tượng hệ thống 17 1.10.2 Dữ liệu đối tượng công việc 18 1.11 Thiết kế giao diện 19 1.11.1 Danh sách hình 19 1.11.2 Sơ đồ liên kết hình 20 1.11.3 Giao diện hình chức 21 CHƯƠNG – KẾT LUẬN 51 1.12 Đánh giá 51 1.12.1 Thuận lợi 51 1.12.2 Khó khăn 51 1.13 Kết đạt 51 1.13.1 Ưu điểm 51 1.13.2 Nhược điểm 51 1.14 Hướng phát triển 51 TÀI LIỆU THAM KHẢO 52 DANH MỤC BẢNG VÀ HÌNH ẢNH Bảng 1.1 Mơ tả chức ứng dụng 13 Hình 1.1 Sơ đồ kiến trúc hệ thống 14 Hình 1.2 Sơ đồ kiến trúc front-end 15 Bảng 1.2 Mô tả thành phần kiến trúc Front-end 16 Hình 1.3 Danh sách đối tượng hệ thống (thuộc tính) 18 Bảng 1.3 Mô tả liệu công việc 19 Bảng 1.4 Danh sách hình chức 20 Hình 1.4 Sơ đồ liên kết hình 20 Hình 1.5 Giao diện hình 27 Hình 1.6 Giao diện hình thêm/sửa công việc 31 Hình 1.7 Giao diện hình Google map 35 Hình 1.8 Giao diện hình lịch biểu 39 Hỉnh 1.9 Giao diện hình tìm kiếm 43 Hình 1.10 Giao diện hình thiết lập 48 Hình 1.11 VA-11 HALL-A 50 LỜI CẢM ƠN Em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người trực tiếp tận tình hướng dẫn nhóm em suốt q trình thực đồ án Không gợi ý định hướng chúng em thực đề tài, cịn nhiệt tình đưa nhận xét, góp ý để em hồn thành đồ án cách tốt Nếu khơng có lời hướng dẫn, dạy bảo đồ án khó hoàn thiện Một lần nữa, chúng em xin chân thành cảm ơn Đề tài nhóm thực khoảng thời gian tháng nên bước đầu vào thực tế, kiến thức kinh nghiệm thực tiễn em nhiều hạn chế Do vậy, chắn khơng thể tránh khỏi sai sót, nhóm mong nhận bảo, ý kiến đóng góp q báu bạn học lớp để em có điều kiện bổ sung, nâng cao kiến thức lĩnh vực này, giúp hồn thiện tích lũy thêm cho thân nhiều kinh nghiệm, phục vụ tốt cho công việc thực tế sau Em xin chân thành cảm ơn cơ! Thành phố Hồ Chí Minh, ngày 07 tháng 06 năm 2022 Sinh viên thực PHẠM MINH VIỆT ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG NHẮC NHỞ LỊCH TRÌNH Tên đề tài tiếng Anh: BUILDING A REMINDER APPLICATION Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 21/02/2022 đến tháng 11/06/2022 Sinh viên thực hiện: Phạm Minh Việt – 18520398 Nội dung đề tài: Mục tiêu: - Xây dựng ứng dụng nhắc nhở người dùng việc họ cần làm Phạm vi: • Phạm vi môi trường: - Triển khai sản phẩm đề tài điện thoại • Phạm vi chức năng: - Thêm, sửa, xóa cơng việc đặt Đối tượng: - Người dùng có nhu cầu cần ứng dụng nhắc nhở lịch trình làm việc Phương pháp thực hiện: - Tìm hiểu React Native - Tìm hiểu ứng dụng nhắc lịch trình có trước đây, từ tiến hành phân tích, xác định yêu cầu cụ thể cho đề tài - Phân tích thiết kế hệ thống - Xây dựng ứng dụng cho người dùng - Tiến hành phát triển kiểm thử Công nghệ: - Expo - React Native - React Redux Kết mong đợi: - Nắm bắt áp dụng công nghệ để xây dựng sản phẩm đề tài - Áp dụng kiến thức học phân tích thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, quản lý triển khai dự án phần mềm để xây dựng sản phẩm đề tài Có thể thay đổi giao diện cách linh động, mở rộng thêm chức cho sản phẩm đề tài phù hợp với nhu cầu thực tiễn tương lai Kế hoạch thực hiện: Thời gian Nội dung 21/02/2022 – 06/03/2022 Tìm hiểu đề tài, xác định chức hệ thống 07/03/2022 – 27/03/2022 Tìm hiểu, nghiên cứu cơng nghệ 28/03/2022 – 24/04/2022 Phân tích thiết kế hệ thống Thiết kế giao diện cho ứng dụng 25/04/2022 – 29/05/2022 Hoàn thiện ứng dụng 30/05/2022 – 11/06/2022 Kiểm thử hệ thống hoàn thiện báo cáo Xác nhận CBHD TP HCM, ngày tháng 06 năm 2022 - (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Phạm Minh Việt CHƯƠNG – TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đối tượng nghiên cứu Đồ án hướng đến nghiên cứu đối tượng sau: ❖ Các công nghệ: o Expo o React Native o React Redux ❖ Đối tượng phạm vi đề tài hướng đến: o Người dùng có nhu cầu cần ứng dụng nhắc nhở lịch trình làm việc 1.2 Phạm vi nghiên cứu Đề tài tập trung vào nghiên cứu ứng dụng nhắc nhở lịch trình Sản phẩm đề tài ứng dụng nhắc nhở lịch trình làm việc 1.3 Phương pháp nghiên cứu Nhóm sử dụng phương pháp nghiên cứu: - Phương pháp đọc tài liệu - Phương pháp phân tích ứng dụng nhắc nhở có CHƯƠNG – CƠ SỞ LÝ THUYẾT 1.4 Tổng quan Expo Expo cơng cụ mã nguồn mở miễn phí xây dựng xung quanh React Native để giúp xây dựng dự án iOS Android Javascript React Về bản: • Trong test, tận dụng môi trường gần giống với môi trường phát triển React.js • Thơng qua SDK Expo, chạm vào điện thoại giống cách làm với code Android iOS Khi tiếp tục phát triển, gặp phải hạn chế Expo Cụ thể, khơng hỗ trợ tích hợp Bluetooth Tất công cụ bên thứ ba dự án Expo phải xây dựng môi trường Expo Sử dụng lệnh npm run eject chuyển đổi dự án thành dự án React Native, nghĩa build ứng dụng từ bây giờ, chuyển đổi thành code Java Objective-C Điều cho phép khắc phục hạn chế đề cập trên, khiến việc test build app khó khăn đáng kể Lưu ý eject hành động vĩnh viễn, nên chắn copy dự án lưu trữ trước tiến hành eject 1.5 Tổng quan React.js Redux 1.5.1 React.js React (hay React.js, ReactJS) thư viện JavaScript hướng đến xây dựng giao diện người dùng React mã nguồn mở phát triển Facebook cộng đồng nhà lập trình React lên năm gần theo xu hướng Single Page Application React hỗ trợ xây dựng thành phần giao diện (components) có tính tương tác tái sử dụng cao Chính mà website sử dụng React chạy mượt, nhanh, có khả mở rộng cao khơng q khó để thực React cho phép nhúng code HTML, CSS code JavaScript nhờ vào JSX, giúp cho lập trình viên dễ dàng lồng ghép HTML, CSS vào JavaScript cách tự nhiên Ngồi ra, cịn thể sử dụng React để render liệu từ người dùng React xây dựng dựa khái niệm component Một component đại điện cho thành phần giao diện người dùng có khả tái sử dụng từ đơn giản đến phức tạp, component lồng tạo nên cấu trúc phân cấp, từ component nhỏ xây dựng nên component lớn Một component nhận tham số từ component khác có trạng thái riêng biệt Các component cịn có tổ chức phân cấp cho phép cho thể tương tác phụ thuộc lẫn Các ưu điểm React: - Dễ dàng nhúng HTML, CSS vào React component JSX - Xây dựng giao diện từ component, React cho phép tái sử dụng component này, giúp việc rút gọn thời gian lập trình dễ dàng quản lý component - React có nhiều cơng cụ phát triển giúp cho việc debug code dễ dàng - Hiệu suất tốt với Virtual DOM React cho phép xây dựng Virtual DOM, có thay đổi DOM thực tế Virtual DOM thay đổi - React triển khai luồng liệu chiều, truyền từ cha đến thông qua thuộc tính (props), điều giúp dễ dàng suy luận kiểm soát luồng logic so với kiểu ràng buộc liệu truyền thống Còn giúp cho trình phát lỗi, bảo trì nâng cấp cách hiệu 1.5.2 Redux Vấn đề quản lý trạng thái vấn đề phức tạp xây dựng giao diện người dùng Khi giao diện có độ phức tạp cao, thành phần giao diện lồng rẽ nhánh nhiều khiến việc quản lý trạng thái thành phần khó khăn Trong React.js liệu thay đổi ảnh hưởng tới nhiều component lúc trạng thái chia sẻ từ component cha cho component Vấn đề xuất muốn chia sẻ trạng thái qua nhiều component gây tăng độ phức tạp quản lý state, tăng tính kết dính làm có component khó tái sử dụng Để giải vấn đề đó, Redux xây dựng với ý tưởng tập trung hóa trạng thái đối tượng, từ giúp việc quản lý trạng thái dễ dàng tốt Redux xây dựng dưa thành phần chính: • Action: Một action đối tượng JavaScript Một action có hai thuộc tính type payload Type định danh nhằm phân loại action, 10 38 Hình 1.8 Giao diện hình lịch biểu 39 40 41 42 Hỉnh 1.9 Giao diện hình tìm kiếm 43 44 45 46 47 Hình 1.10 Giao diện hình thiết lập 48 49 Hình 1.11 VA-11 HALL-A 50 CHƯƠNG – KẾT LUẬN 1.12 Đánh giá 1.12.1 Thuận lợi - Giảng viên hướng dẫn tận tình, hỗ trợ định hướng nhóm nghiên cứu thực đề tài - Cộng đồng lớn giúp giải vấn đề thường gặp phải sử dụng cơng nghệ cách nhanh chóng - Vận dụng kiến thức, quy trình phát triển học - Tiếp thu nhiều kiến thức 1.12.2 Khó khăn - Vấn đề tìm hiểu công nghệ React Native, React Redux, Expo thời gian 1.13 Kết đạt 1.13.1 Ưu điểm - Hoàn thành đa số yêu cầu đặt ban đầu, thêm số chức khác trình nghiên cứu phát triển ứng dụng - Giao diện đơn giản, bố cục hợp lý, người dùng dễ dàng thao tác ứng dụng - Tốc độ phản hồi thao tác nhanh, tối ưu hóa trải nghiệm người dùng - Sinh viên thực nắm cách tổ chức, xây dựng hệ thống hoàn thiện tạo ứng dụng nhắc nhở lịch trình để phục vụ cho nhu cầu người dùng - Sinh viên nắm công nghệ phổ biến React Native, Expo - Ứng dụng triển khai thành công môi trường di động 1.13.2 Nhược điểm - Sinh viên đánh số Word 1.14 Hướng phát triển - Cho phép người dùng đăng nhập đồng liệu nhiều thiết bị - Thêm animation, hiệu ứng - Thêm tính hiển thị thơng tin lịch trình địa điểm người dùng có danh sách công việc - Thêm chức theo dõi người dùng, chia lịch trình, địa điểm 51 TÀI LIỆU THAM KHẢO [1] Wern Ancheta (2018), “Phát triển React Native Đơn giản với Expo”, [Online] Available: Phát triển React Native Đơn giản với Expo (tutsplus.com) [2] Facebook (2022), “React Native Documentation”, [Online] Available: Introduction · React Native [3] Dan Abramov (2022), “React Redux Documentaion”, [Online] Available: Getting Started with React Redux | React Redux (react-redux.js.org) [4] React Native Community (2022), “React Native Async Storage Documentation”, [Online] Available: Usage | Async Storage (react-native-async-storage.github.io) [5] Expo (2022), “Expo Notifications Documentation”, [Online] Available: Notifications - Expo Documentation 52 ... cứu Đề tài tập trung vào nghiên cứu ứng dụng nhắc nhở lịch trình Sản phẩm đề tài ứng dụng nhắc nhở lịch trình làm việc 1.3 Phương pháp nghiên cứu Nhóm sử dụng phương pháp nghiên cứu: - Phương... Đối tượng: - Người dùng có nhu cầu cần ứng dụng nhắc nhở lịch trình làm việc Phương pháp thực hiện: - Tìm hiểu React Native - Tìm hiểu ứng dụng nhắc lịch trình có trước đây, từ tiến hành phân... Minh, ngày 07 tháng 06 năm 2022 Sinh viên thực PHẠM MINH VIỆT ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG NHẮC NHỞ LỊCH TRÌNH Tên đề tài tiếng Anh: BUILDING A REMINDER APPLICATION Cán hướng dẫn: